CSS常见属性
字体
div {
/*
font-* 字体相关的属性,这一类具有继承性（给父元素设置了，子元素或后代元素也会有作用）
*/
font-size: 20px;
font-style: italic;
font-weight: bold;
font-family: 宋体;
}
背景
div {
width: 400px;
height: 400px;
/* background-* ,背景这一系列的属性不具有继承性 */
/* 背景颜色 */
background-color: skyblue;
/* 背景图片 */
/* 240 * 320 */
background-image: url(./images/sanguo.jpeg);
/* 457 * 250 */
/* background-image: url(./images/3.png); */
/* 背景图片是否平铺 no-repeat 不平铺*/
background-repeat: no-repeat;
/* 背景图片的位置
background-position: x y ;
x为负数，背景图片水平向左移动，为正数，水平向右移动
y为负数，背景图片垂直向上移动，为正数，垂直向下移动
top right left bottom center
*/
/* background-position: 100px 50px; */
background-position: center center;
/* 背景图片的尺寸
(cover 把图片自动填充满整合标签)*/
/* background-size: 100% 100%; */
/* contain 这个属性由原图片的尺寸（宽度 * 高度）来决定。
如果宽度大于高度，就是以横向填充标签(水平方向)
如果高度大于宽度，就是以纵向填充标签（垂直方向）
*/
background-size: contain;
}
</style>
文本
div {
/* text-* 文本相关的属性, 具有继承性 */
/* 修饰文本线 */
/* line-through 、underline 、 overline*/
text-decoration: line-through;
/* 设置文本水平对齐方式 left、 center 、right */
text-align: center;
/* 字体颜色 (具有继承性)*/
color: deeppink;
}
边框
/* 边框。可以撑开盒子大小。
一个标签有四个边，每个边可以有大小、样式、颜色组成。
border-width
border-style: solid (实线 、虚线、点线)
border-color
*/
.box-2 {
/* border-width: 10px; */
/* border-style: solid; */
/* border-color: green; */
/* border: 10px solid green; */
/* 上边框 */
border-top: 30px solid purple;
/* 右边框 */
border-right: 30px solid orange;
/* 下边框 */
border-bottom: 30px solid blue;
/* 左边框 */
border-left: 30px solid green;
}
内边距
内边距： 是指边框与内容之间的间距。可以撑开盒子大小。
.box-4 {
border: 5px solid #000;
/* padding-left: 50px;
padding-top: 80px;
padding-right: 40px;
padding-bottom: 30px; */
/* 上 右 下 左 */
padding: 80px 40px 30px 50px;
}
外边距
.box-1 {
/*
外边距。不会撑开盒子大小。
元素作用于浏览器或其他元素之间的间距。
元素与元素之间的间距，我们可以理解为外边距。
margin-left 正数往右边移动，负数往左边移动
margin-top 正数往下边移动，负数往上边移动
*/
/* margin-top: 50px; */
/* margin-right: 100px; */
/* margin-bottom: 100px; */
/* margin-left: 50px; */
/*上 右 下 左 */
margin: 50px 100px 100px 50px;
}
行高
<!--
line-height
行高： 文本行与行之间的间距。
其实是指每行文本基线与基线之间的间距
-->
<style>
.text {
background-color: red;
font-size: 40px;
/* 属性值： 倍数 / px */
line-height: 1.75;
}
</style>
<div class="text">
xfgj hello world
</div>
圆角
<!-- 圆角,早期低版本浏览器，不支持圆角怎么办？答案：采用图片代替。 -->
<style>
.box {
width: 200px;
height: 200px;
background-color: blue;
/* 圆角属性 */
border-radius: 100px;
}
</style>
<div class="box"></div>
<style>
.demo {
width: 200px;
height: 300px;
background-color: green;
/* 分别设置不同的圆角 */
border-top-left-radius: 40px;
border-top-right-radius: 40px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
</style>
<div class="demo"></div>
透明度
<style>
.box-2 {
width: 300px;
height: 100px;
font-size: 40px;
background-color: rgb(0,0,255);
/* 设置标签透明
标签和文本都变透明了
opacity: 0; 完全透明，但标签不是消失，还是占位置的。
*/
opacity: .5;
}
</style>
<div class="box-2">hello abc</div>
浮动
<!--
浏览器在解析html文档时，正常的顺序是从上往下、从左往右解析。
这个正常的解析过程，我们叫做正常文档流(标准文档流)
-->
<style>
/* 浮动: 设置元素靠左或者靠右摆放。 */
.fl {
float: left;
}
.fr {
float: right;
}
</style>
<!--
123
-->
<div class="fl">1</div>
<div class="fl">2</div>
<div class="fl">3</div>
<!--
654
-->
<div class="fr">4</div>
<div class="fr">5</div>
<div class="fr">6</div>
<!--
浮动会让元素脱离正常文档流，这个浮动了的标签就不占位置了，
会影响后面的html标签，不会影响前面html标签。
后面的html标签不想受到浮动的影响，可以设置 clear: both; 属性清除浮动的影响。
-->
<style>
.clear {
/* 清除浮动属性 */
clear: both;
}
/* 使用伪类元素清除浮动 */
.clearfix::after {
/* 生成伪类元素属于行内元素 */
content: "";
/* 把行内元素转成块元素 */
display: block;
/* 清除浮动 */
clear: both;
}
</style>
<div class="parent">
<div class="child bg-red"></div>
<div class="child bg-green"></div>
<!-- 这个块元素用于清除浮动，那能不能用伪类元素代替这个块元素做清除浮动的事情。 -->
<div class="clear"></div>
</div>
<!--
设置了浮动的元素，不占位置，就无法撑开父元素的高度，就看不见灰色的背景。
在浮动的元素后面添加一个块元素，给这个块元素设置清除浮动即可。
使用这个类名：clearfix
目的是为了生成伪类标签代替 “<div class="clear"></div>”。
以后遇到哪个标签设置了浮动，就找到这个标签的父元素，给这个父元素设置clearfix类名即可。
就起到清除浮动的作用。
-->
<div class="parent clearfix">
<div class="child bg-pink"></div>
<div class="child bg-orange"></div>
</div>
定位
<!--
定位： 设置标签的位置
position属性
配合以下属性使用
方位： left top right bottom
层级： z-index
同时设置left和right优先读取left属性值。
position 有哪些属性值
relative 相对定位
absolute 绝对定位
fixed 固定定位
sticky 粘性定位（吸顶/吸底）
static 静态（无定位作用）
-->
<style>
body {
margin: 0;
height: 2000px;
}
.box {
width: 100px;
height: 100px;
font-size: 25px;
}
.box-1 {
background-color: red;
/* 相对定位 (不会让元素脱离正常文档流)*/
position: relative;
left: 150px;
top: 0px;
}
.box-2 {
background-color: green;
/* 绝对定位 (会让元素脱离正常文档流、不占位置) */
position: absolute;
left: 150px;
}
.box-3 {
background-color: blue;
/* 固定定位 (会让元素脱离正常文档流、不占位置)*/
position: fixed;
left: 300px;
}
.box-4 {
background-color: orange;
/* 粘性定位 (不会让元素脱离正常文档流)*/
position: sticky;
left: 450px;
top: 0;
}
.box-5 {
background-color: purple;
/* static (没有定位作用的) */
position: static;
left: 450px;
top: 0;
}
.box-6 {
background-color: pink;
}
</style>
<div class="box box-1">1(相对)</div>
<div class="box box-2">2(绝对)</div>
<div class="box box-3">3(固定)</div>
<div class="box box-4">4(粘性)</div>
<div class="box box-5">5</div>
<div class="box box-6">6</div>
弹性布局 flex
<!--
父元素
display: flex 弹性盒子
flex-direction: row (主轴方向) | column(侧轴)
flex-wrap: wrap | nowrap 设置换行
设置元素在主轴方向的位置
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly
设置元素在侧轴方向的位置
align-items: flex-start | center | flex-end | stretch (拉伸)
设置元素在侧轴方向的位置(和换行一起使用)
align-content: flex-start | center | flex-end
子元素
flex-grow 扩大
flex-shrink 收缩
flex-basis 设置尺寸
flex: 1 2 3;
flex: flex-grow flex-shrink flex-basis
order 设置元素渲染的先后顺序
align-self 设置元素在侧轴方向的位置
-->
<style>
body {
margin: 0;
}
.header {
width: 100%;
height: 60px;
background-color: deepskyblue;
/* 此处利用弹性盒子，快速控制子元素在主轴方向上两端对齐，在侧轴方向上居中。 */
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-weight: bold;
font-size: 20px;
margin-left: 20px;
}
.link {
margin-right: 20px;
}
.link a {
color: #ffffff;
font-size: 20px;
/* 移除下划线 */
text-decoration: none;
}
</style>
<div class="header">
<div class="logo">
<!-- 品牌 -->
<span>LOGO</span>
</div>
<div class="link">
<a href="#">登录</a>
</div>
</div>
