css：层叠样式表（Cascading Style Sheet）
CSS就是学习一堆的选择器和属性。
css的主要作用就是对代码的布局以及美化
布局：
1）盒子模型 2）块级元素并排显示
盒子模型6大属性：
1）内容区域 width height
2）内填充区域 padding
3）边框 border
4）外填充区域 margin
5）背景 <img /> 也可以给img添加背景图片
块级元素并排显示：
1）浮动
2）flex
3）定位
4）行内块
Css中的属性：
布局：
盒子模型设置
浮动设置
定位设置
美化：
字体设置
文本设置
列表设置
表格设置
交集选择器：
div 标签选择器
.box 类选择器
#item ID选择器
div.box 交集选择器 表示选中div并且DIV中有一个类是box
在调试面板中，样式也是分多类的：
1）继承祖先元素的样式
2）标签有自己默认的样式 user agent stylesheet
3）我们自己写的样式
层叠性：
1）自己有样式 > 继承 > 默认的
2）行内样式 > 内部 = 外部 (就近原则)
3）ID > CLASS > DIV
字体设置：
1. font-style:设置字体是否倾斜 normal italic
em: font-style:normal 去除em自带的字体倾斜
2. font-weight:设置字体是否加粗 normal bold bolder
h1: font-weight:normal
span: font-weight:bold 用的比较多的
3. font-size: 设置字体大小 谷歌浏览器默认是16px 用的最多是的 12px 和 14px 最小是12px
4. font-family: 设置字体类型
5. font:上面的几个属性的复合属性
font:font-style font-weight font-size/line-height font-family
font-style font-weight 可以不写 也可以交换位置
font-size/line-height font-family 必须写 能交换位置
6. 有继承性：给父元素设置了，子元素也可以继承到
7. 经典应用：给body设置字体相关的属性。
8. color:设置字体颜色
对于a标签来说，需要选中a标签 。
文本设置：
text-decoration: 用来设置文本的装饰线 下划线 删除线
underline 下划线
应用：把a标签的默认的下划线去掉 hover时，加上下划线
line-through 删除线 偶尔用一下
text-indent: 首行空两格
2em 空两个汉字的宽度
-1000em 把隐藏一个盒子中的文本
text-align: 1）让盒子中的文本居中 2）让行内元素或行内块元素在一个盒子中居中（可以把行内元素或行内块元素当成文本）
<div style="border:1px solid red; height: 100px; line-height: 100px; text-align: center;">
<!-- 让男标签中的文本在盒子中的居中了 -->
<div>div</div>
让a盒子中的内容水平居中
<a href="" style="border: 1px solid red; text-align: center;">a标签</a>
line-height:设置行高
如果是子标签是男标签，行高可以撑起子标签的高度
<div style="height: 100px; line-height: 100px;"><a href="">嘻嘻</a></div>
如果是子标签是女标签，行高不能撑起子标签的高度
<div style="height: 100px; line-height: 100px;"><a href="">嘻嘻</a></div>
- 盒子模型： 只要使用选择器选中了一个盒子 选设置盒子模型相关的属性 然后考虑是否并排显示 最后再去考虑美化
内容区域：width 和 height
内填充区域： padding
边框： border
外填充区域：margin
背景： background
一张网页就是一堆的盒子堆积起来的。盒子就是标签，都是矩形。
内容区域：width 和 height
对于男盒子来说，表示内容区域
对于女盒子，width和height不起作用
注意点：
1）不设置有默认值，宽度默认值是auto，对于块级元素来说，auto表示尽可能大，对于行内元素来说，auto表示尽可能小。
2）不设置高度，男盒子的高度是内容的高度，也就是说高度是由内容撑起来的，对于女盒子来说，也是由内容撑起来的，但是和font-size也有关系。
3）宽度和高度可以设置百分比，是父元素的百分比的，一般情况下在移动端开发时用的多一点。
边框： border
边框的粗细 border-widht
边框的样式 border-style
边框的颜色 border-color
一般情况下，不会单独设置 border是一个复合属性
注意点：
1）border:1px solid red; border后面的属性是没有顺序的，但是一般都是先写border-width,然后是border-style，最后是border-color。
2）粗细大部分情况下单位都是px 你也可以使用单词 使用单词时 在不同的浏览器下代表粗细是不一样的
3）边框的样式也非常多 用的非常多的有这几个：solid 实线 dotted 点画线 dashed 虚线 none 没有线 .....
4）边框的颜色设置 单词 用的最多还是16进制 也可以使用rgb函数
5）也可以单独设置某一个方向上的border border-top:1px solid red; 用的也比较多
内填充区域： padding
用来设置内填充，也叫补白 表示内容区域和边框之间的距离
四个方向： 用的也比较多的
padding-top:
padding-right:
padding-bottom:
padding-left:
padding后面也可以跟一个值，二个值，三个值，四个值：
一个值：padding:10px 四个方向的padding都是10px
二个值：padding:10px 20px; 上下是10px 左右是20px
三个值：padding:10px 20px 30px; 上是10px 左右是20px 下是30px
四个值：padding:10px 20px 30px 40px; 上 右 下 左
注意点：
1）有些标签是有默认的padding 如ul ol... 等 一刀切 *{ padding:0; }
2）对于行内元素来说，padding在垂直方向上不影响行高，效果上看似是有padding，但是padding不是真正的padding，或者说对于一个女盒子来说，padding在垂直方向上无效。
3）对于块级元素来说，上下padding可以撑起男盒子的高度。
外填充区域：margin
表示外边距 盒子与盒子之间的距离 是边框之外的间隔 是在border之外的
四有个方向：
margin-top
margin-right
margin-bottom
margin-left
margin后面也可以跟一个值，二个值，三个值，四个值：
一个值：margin:10px 四个方向的margin都是10px
二个值：margin:10px 20px; 上下是10px 左右是20px
三个值：margin:10px 20px 30px; 上是10px 左右是20px 下是30px
四个值：margin:10px 20px 30px 40px; 上 右 下 左
注意点：
1）有此标签有默认的margin 一刀切 *{ margin:0; padding:0; }
2）对于行内元素来说，margin在垂直方向上是无效的
3）margin可以设置auto。 表示尽可以大 div{ margin:0 auto; }
4）margin可以设置负值
5）对于块级元素来说，margin有重叠问题（塌陷问题）
对于块级元素来说，margin有重叠问题（塌陷问题）：
1）兄弟元素之间的重叠问题
2）父子元素之间的重叠问题
兄弟元素之间的重叠问题：
<style>
.box7 {
width: 200px;
height: 200px;
background-color: gold;
margin-bottom: 150px;
}
.box8 {
width: 200px;
height: 200px;
background-color: skyblue;
margin-top: 100px;
}
</style>
<div class="box7">box7</div>
<div class="box8">box8</div>
按理说：两个盒子之间的margin应该是250px
实现是：就150px
这种现象叫：margin的塌陷
margin塌陷的前提：1）男标签 2）垂直方向
margin到底是多少：取大原则
- 首先需要知道 margin塌陷是不好的 也是不css的bug 如何避免？
答：说白了，只设置一个盒子的margin。
父子元素之间的重叠问题:
<style>
.box9{
background-color: pink;
margin-top: 50px;
}
.box9 .box10{
background-color: gold;
margin-top: 30px;
}
</style>
<div class="box9">
<p class="box10">我是一个段落</p>
</div>
按理说：p标签上面的应该有80px的margin
实际是：只有50px margin
这种现象叫：父子元素之间的margin重叠
解决：
1）给父元素加border
2）给父元素加padding 只加一个0px不行
浮动：
浮动的初衷：为了实现新闻的字围效果。
浮动的元素半脱离标准文档流：
出国了
浮动刚开始就为了实现字围效果，文字并不会钻到浮动的元素后面，文字会环绕浮动的元素分布，就叫字围效果。
现在我们基本上利用浮动并不是为了实现字围效果，我们主要使用浮动来让块级元素并排显示。
浮动元素的特点：
1）贴靠性 如果都向同一个方向浮动，这两个浮动的元素会紧紧的贴在一起，如果后面的空间不够贴靠的话，它会自动换行。
2）包裹性 如果是一个男盒子，在没有设置宽度的情况下，只要它浮动了，那么它的宽度会尽可能小
3）一个元素内部所有元素都浮动了，如果父元素在没有设置高度的情况下，它的高度会变成0，也就说父元素的高度塌陷了。
4）如果一个女盒子浮动了，就可以设置宽度和高度，说白了，女盒子就变成男盒子
元素浮动会造成影响：
1）对父元素造成的影响
2）对后面的兄弟元素影响
我们需要清除浮动所造成的的影响，也叫清除浮动：
1）清除对父元素所造成影响
A）overflow:hidden
B）加高法
元素浮动也会对它后面的元素造成影响：
后面的元素会钻上去，但是文字不会，文字会形成字围效果。 对兄弟元素造成影响，我们需要清除这种影响，也叫清除浮动。
最最专业的：clear: left/right/both clear:both
记住了：clear:both只能写在第1个受影响的元素上，写在父元素上没有什么用。
clear属性应该写在什么地方？
答：写在第1个受影响的元素上的。
浮动为什么是半脱离？
浮动的初衷：为了实现字围效果，字肯定是钻不上去的，由于它是钻不上去的，所以我们说浮动是半脱离标准文档流。
-
问：一个DIV中浮动元素，能不能脱离DIV。
答：浮动肯定脱离不了父元素了，可以影响父元素的高度，肯定跑到别的盒子中。 -
问：两个浮动的元素的能不能重叠到一起？
答：不能
-
问：什么时候，可以让两个盒子重叠到一起：
答：1）一个盒子浮动，另一个不浮动 2）定位，定位完全脱离标准文档流 -
问：浮动元素都是先向上浮动吗？
答：对的 -
问：浮动元素是先上向浮动，浮到什么地方？
答：浮动了父盒子的边界 如果是body，body没有设置高度，也会对body造成影响，body的高度也会塌陷，使用overflow:hidden; 不能清除浮动，所以说不要直接在body中裸奔。 -
问：body是一个盒子吗？
****加粗样式答：是
盒子模型之背景：background
background-color:设置盒子的背景颜色 背景颜色可以填充padding 也可以填充border
background-image:设置盒子的背景图片 img标签也是盒子 也可以给img这个盒子设置背景图片
一个盒子大小正好和背景图大小一样：正好装进去
一个盒子如果大于背景图：默认会在x和y轴都进行平铺
一个盒子如果小于背景图：只会显示背景图的一部分，背景图的左上角和盒子的左上角对齐 左上角是指从pddding开始 但是border中也会填充图片图片
background-repeat:
控制是否平铺 repeat-x 只平铺x轴 repeat-y 只平铺y轴 repeat x和y轴都平铺 no-repeat x和y轴都不平铺
background-position:
一个小盒子中放一个大的背景图，可以使用background-position定位。
一个大盒子中放一个小的背景图，也可以使用background-position定位。
1486
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
