CSS常用知识点总结（一）
程序员文章站
2022-04-11 17:09:48
...
CSS学习小结
CSS样式引入方式
1、内联样式表(内嵌 行内) style属性
<div style="width:100px;"></div>
2、内部样式表 style标签
<style>
div{width:100px}
</style>
3、外部样式表 link
<link rel="stylesheet" type="text/css" href="css/style.css"/>
样式表优先级
- 内联样式 > 内部样式 / 外部样式（内部/外部样式改变不了内联样式中存在的属性的值
） - 内部样式和外部样式按照书写顺序来判断优先级
选择器
基本选择器：
元素选择器 p { }
Id选择器 #p1 { }
类选择器 .p1 { }
通配符选择器 * { }
复合选择器
并集选择器 p, h1, div { }
交集选择器 p#p1 { }
后代选择器 div p { }
子元素选择器 div > p { }
伪类选择器
链接伪类选择器：
:link 未访问的链接 a:link { }
:visited 已访问的链接 a:visited { }
:hover 鼠标经过 a:hover { }
:active 选定（**）的链接，即点击链接不松开的状态 a:active { }
结构伪类选择器：
:first-child 选取属于其父元素的首个子元素的指定选择器
:last-child 选取属于其父元素的最后一个子元素的指定选择器
:nth-child(n) 匹配属于其父元素的第n个子元素，不论元素类型，其中的n从0开始，2n就是0,2,4,6,8…,3n就是0,3,6,9…
:nth-last-child(n) 匹配属于其父元素的第n个子元素，从最后一个开始计数，也就是倒数
:nth-of-type(n) p:nth-of-type(2) 选择属于其父元素第二个p元素的每个p元素
伪元素选择器
element::first-letter 文本的第一个单词或字（如中文、日文、韩文等）
element::first-line 文本第一行
element::selection 可改变选中文本时的样式
element::before和element::after 在E元素内部的开始位置和结束位创建一个元素，该元素为行内元素，且必须要结合content属性使用
注意: E:after、E:before 在旧版本里是伪元素，CSS3的规范里“:”用来表示伪类，“::”用来表示伪元素，但是在高版本浏览器下E:after、E:before会被自动识别为E::after、E::before，这样做的目的是用来做兼容处理。
背景属性：background（不可继承）
background-color 背景颜色
background-image 背景图片（有背景图片才可以设置以下的属性）
background-repeat 背景图片平铺方式
background-attachment 背景图像是否固定或者随着页面的其余部分滚动
background-position 背景图片位置
background-size 背景尺寸
background: 背景颜色 背景图片 图片平铺方式 图片附着方式 图片位置; // 简写
边框属性：border
border-color 边框颜色
border-width 边框宽度
border-style 边框样式
border-top 上边框
border-bottom 下边框
border-left 左边框
border-right 右边框
border: 边框宽度 边框样式 边框颜色; // border的简写方式，给上下左右设置边框
border-radius 边框圆角属性
内外边距：
margin：外边距
书写方式：
margin-top 上外边距
margin-bottom 下外边距
margin-left 左外边距
margin-right 右外边距
margin: 上下 左右;
margin: 上 左右 下;
margin: 上 右 下 左;
注意：
1. 相邻块级元素垂直外边距合并，如果上面元素有下外边距，下面元素有上外边距，它们之间的垂直间距不是二者的间距相加，而是取两者中的较大者。这种情况尽量避免。
2. 嵌套块级元素垂直外边距的合并，对于两个嵌套关系的块级元素，如果父元素没有设置上边框或上内边距，则父元素的上外边距和子元素的上外边距会发生合并，合并之后的外边距为两者中的较大者。
解决方案：1. 可以给父元素添加上边框或上内边距；
2. 可以为父元素添加overflow: hidden;（常用的）
padding：内边距
书写方式：
padding -top 上内边距
padding -bottom 下内边距
padding -left 左内边距
padding -right 右内边距
padding: 上下 左右;
padding: 上 左右 下;
padding: 上 右 下 左;
注意：添加padding后，会改变元素原来的可视大小。
解决方案：1. 使用box-sizing: border-box;盒子模型 ；
2. 在给定元素宽高时，就将padding先计算在内
浮动（float ）：用来进行页面布局
- 文档流（标准流）：标签默认的排列方式及属性
- 浮动流：脱离文档流之后所在的流
规则：
1.设置浮动以后就脱离了原有的文档流，所以后面的元素就会向前移位进行补充
2. 浮动元素只在自己那一行浮动，不会向前覆盖；但如果该行宽度不够，后面的浮动元素会自动换行
3. 谁先浮动谁就在前面
- 使用场景：浮动可以将多个块级元素一行排列
存在的问题：
- 使用浮动后，元素会脱离标准流，也就不再占有位置，下面的元素后上移填补空缺，但会被浮动元素遮住。
- 子元素使用浮动后，父元素（没有设置高度）会因为子元素浮动而出现高度为0（高度塌陷）的问题。
要解决这些问题就需要清除浮动。
解决方案：
清除浮动之前：
- 给脱标元素下面的标准流元素设置clear属性
选择器{clear: left | right | both} - 额外标签法：是w3c推荐的做法是通过在浮动元素末尾添加一个空的块级标签，例如：
<div style=”clear:both”></div>，或者其他标签都可以。
<style type="text/css">
.box1,.box3{
width: 200px;
height: 200px;
}
.box2,.box4{
width: 100px;
height: 100px;
}
.box1{
background-color: tan;
float: left;
margin-left: 50px;
}
.box2{
background-color: teal;
}
.box3{
background-color: thistle;
/*给脱标元素下面的标准流元素设置clear属性*/
clear: both; /*常用*/
/* clear: left; */
}
.box4{
background-color: tomato;
}
</style>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<!--额外标签法-->
<!--
优点： 通俗易懂，书写方便
缺点： 添加许多无意义的标签，结构化较差。 我只能说，w3c你推荐的方法我不接受，你不值得拥有。。。
-->
<!-- <div style="clear:both"></div> -->
<div class="box3">
<div class="box4"></div>
</div>
</body>
清除浮动之后：
3. 父级元素添加overflow属性方法：通过触发BFC的方式，实现清除浮动的效果
给父级元素添加overflow: hidden | auto | scroll都可以实现
4. 使用after伪元素清除浮动
5. 使用before和after双伪元素清除浮动
清除浮动之前：
<style type="text/css">
.box1 {
/* 很多情况下，我们父级元素不方便给高度，因为考虑到子元素的高度会变 */
width: 600px;
background-color: #008080;
/*给父级元素天添加overflow属性清除浮动*/
/*
优点： 代码简洁
缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。
*/
/* overflow: hidden; 常用*/
/* overflow: auto; */
/* overflow: scroll; */
}
/* 使用after伪元素清除浮动 */
/*after前使用单冒号是为了兼容以前的浏览器*/
/*注意： content:"." 里面尽量跟一个小点，或者其他，尽量不要为空，否则再firefox 7.0前的版本会有生成空格。*/
/*
优点： 符合闭合浮动思想 结构语义化正确
缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。
*/
/* .clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {*zoom: 1;} 带有*是IE6、7 专有
*/
/* 使用before和after双伪元素清除浮动 */
/*
优点： 代码更简洁，更常用
缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。
*/
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom:1; /* 兼容ie6、7 */
}
.box2 {
width: 600px;
height: 240px;
background-color: #FF0000;
}
/* son1和son2是处于标准流，会撑开父盒子 */
.son1 {
width: 150px;
height: 100px;
background-color: darkgoldenrod;
float: left;
}
.son2 {
width: 300px;
height: 100px;
background-color: aqua;
float: left;
}
</style>
<body>
<div class="box1 clearfix">
<div class="son1">son1</div>
<div class="son2">son2</div>
</div>
<div class="box2">box2</div>
</body>
清除浮动之后：