一、CSS三特性
CSS三大特性：层叠性、继承性、优先级。
- 层叠性
相同的选择器下
样式冲突：就近原则覆盖。
样式不冲突：不影响。
<style>
div {
color: red;
font-size: 12px;
}
div {
/* 文本颜色覆盖为粉色，字体大小不影响 */
color: pink;
}
</style>
- 继承性
子标签会继承父标签的某些样式（主要是文字方面的样式），如文本颜色、字号。
<div>
<p>龙生龙，凤生凤，老鼠生的孩子会打洞</p>
</div>
<style>
/* p 继承 div 的样式 */
div {
color: pink;
font-size: 14px;
}
</style>
- 优先级
<!--
选择器类型相同：就近原则
选择器类型不同：看选择器权重(!important【10000】 > 行内样式【1000】 > ID选择器【100】 > 类/伪类选择器【10】 > 元素选择器【1】 > 继承【0】 > 通配符)
注意：复合选择器会有权重叠加的问题（加法），权重虽然会叠加，但是永远不会有进位。
下面的例子里：有!important，行内样式，ID选择器，类选择器，元素选择器指定文本颜色。根据权重!important的优先级最高，所以显示为粉色。
-->
<div class="test" id="demo" style="color: purple">你笑起来真好看</div>
<ul class="nav">
<li>大猪蹄子</li>
<li>大肘子</li>
<li>猪尾巴</li>
</ul>
<style>
.test {
color: red;
}
div {
color: pink!important;
}
#demo {
color: green;
}
/* 复合选择器 */
/* ul li 权重1 + 1 = 2 */
ul li {
color: green;
}
/* .nav li权重10 + 1 = 11 */
.nav li {
color: pink;
}
</style>
二、盒子模型
- 盒子模型四要素：border边框、content内容、padding内边距、margin外边距。
- 边框
边框三属性：border-width粗细、border-style边框样式、border-color边框颜色。边框会影响盒子的实际大小。
<style>
div {
width: 300px;
height: 200px;
/* border-width 边框粗细 一般情况下都用px */
border-width: 5px;
/* border-style 边框样式：solid实线边框 dashed虚线边框 dotted点线边框*/
border-style: solid;
border-color: pink;
/* 边框的复合写法，没有顺序 */
border: 5px solid pink;
/* 上边框 */
border-top: 5px solid pink;
/* 下边框 */
border-bottom: 10px dashed purple;
/* 左边框 */
border-left: 10px dotted blue;
/* 右边框 */
border-right: 10px dashed orange;
}
</style>
圆角边框，是圆/椭圆与边框的交集形成圆角效果。写法如下：
3. 圆形的做法:
<div class="yuanxing"></div>
4. 圆角矩形的做法:
<div class="juxing"></div>
5. 可以设置不同的圆角:
<div class="radius"></div>
<style>
/* 圆形：半径=宽度和高度的一半 */
.yuanxing {
width: 200px;
height: 200px;
background-color: pink;
/* border-radius: 100px; */
border-radius: 50%;
}
/* 圆角矩形：半径=高度的一半 */
.juxing {
width: 300px;
height: 100px;
background-color: pink;
border-radius: 50px;
}
/* 不同圆角：顺时针（↖️ ↗️ ↘️ ↙️） */
.radius {
width: 200px;
height: 200px;
border-radius: 10px 20px 30px 40px; */
border-radius: 10px 40px; */
/* ↖️ */
border-top-left-radius: 20px;
}
</style>
- 内边距
内边距也会影响盒子大小。若盒子本身没有写width/height属性，则此时padding不会撑大盒子。
<!-- padding-top, padding-bottom, padding-left, padding-right -->
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
padding-left: 20px;
padding-top: 30px;
/* 复合写法 */
/* 1.上右下左 */
padding: 5px;
/* 2.上下 左右 */
padding: 5px 10px;
/* 3.上 右左 下 */
padding: 5px 10px 20px;
/* 4.上右下左 顺时针 */
padding: 5px 10px 20px 30px;
}
</style>
- 外边距
盒子和盒子之间的距离。
<!-- margin-top, margin-bottom, margin-left, margin-right -->
<!-- margin的复合写法规则与padding一致 -->
<style>
.header {
width: 900px;
height: 200px;
background-color: pink;
/* 块级盒子水平居中对齐写法，盒子必须指定了宽度！！ */
margin: 0 auto;
}
</style>
外边距合并问题。分为两类：
1）相邻块级元素垂直外边距合并：只给其中一个加外边距即可。
<div class="damao">大毛</div>
<div class="ermao">二毛</div>
<style>
.damao, .ermao {
width: 50px;
height: 50px;
background-color: pink;
}
/* 合并为：最大值200px。并不是两者相加 */
.damao {
margin-bottom: 100px;
}
.ermao {
margin-top: 200px;
}
</style>
2）嵌套块级元素垂直外边距父元素塌陷。当子元素外边距大于父元素外边距时，父元素会塌陷下来，有三种解决方案。
<div class="father">
<div class="son"></div>
</div>
<style>
.father {
width: 400px;
height: 400px;
background-color: purple;
margin-top: 50px;
/* 方法1.为父元素定义透明边框 */
border: 1px solid transparent;
/* 方法2.为父元素定于上内边距 */
padding: 1px;
/* 方法3.（常用）为父元素添加overflow: hidden */
overflow: hidden;
}
.son {
width: 200px;
height: 200px;
background-color: pink;
margin-top: 100px;
}
</style>
三、阴影
- 盒子阴影
盒子阴影不占空间，不会影响其他盒子排列。
<style>
div:hover {
/* box-shadow: 水平位置、垂直位置、模糊距离(虚实)、尺寸、颜色 内阴影(insert)->默认外阴影outset，但不能写，会让阴影失效 */
box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, .3);
}
</style>
- 文字阴影
text-shadow比盒子阴影box-shadow少了尺寸和内部阴影属性。
<style>
div {
font-size: 50px;
color: orangered;
font-weight: 700;
/* 水平位置 垂直位置 虚实 颜色 */
text-shadow: 5px 5px 8px rgba(0, 0, 0, .3);
}
</style>
四、浮动（float）
传统网页布局有三种方式。
1）普通流/标准流：标签按照规定好默认方式排列，块级元素、行内元素、行内块元素。
2）浮动：创建浮动框移动到左边缘/右边缘，最典型的应用是让多个块级元素一行内排列显示。
3）定位：元素自由定位布局。
网页布局第一准则：【多个块级元素，纵向排列用标准流，横向排列用浮动】
这一章节为浮动的知识和用法。
- 浮动特性
1）浮动元素会脱离标准流。
浮动元素脱离标准流的控制浮动到指定位置；
浮动的盒子不再保留原先的位置，下面的元素上移。
2）浮动元素会在一行内显示，并且元素顶部对齐。
如果一行装不下，多出的盒子会另起一行对齐。
3）浮动元素具有行内块元素的特性。
任何元素都可以浮动。不管原先是什么模式的元素，添加浮动之后具有“行内块元素”的特性。如果行内元素有了浮动, 则不需要转换块级\行内块元素就可以直接给高度和宽度。 - 浮动布局
1）先用标准流的父元素排列上下位置，之后加入浮动的子元素排列左右位置。
2）先设置盒子大小，再设置盒子位置。
<!--
1. 浮动和标准流的父盒子搭配
2. 浮动的盒子只会影响后面的标准流
3. 如果一个子元素浮动了,其他盒子也浮动,这样保证这些子元素一行显示
-->
<div class="box">
<div class="damao">大毛</div>
<div class="ermao">二毛</div>
</div>
<style>
.box {
width: 900px;
height: 300px;
background-color: pink;
margin: 0 auto;
}
.damao {
float: left;
width: 200px;
height: 200px;
background-color: purple;
}
.ermao {
float: left;
width: 200px;
height: 150px;
background-color: red;
}
</style>
- 清除浮动
清除浮动原因是：父盒子无高度；浮动不占位置；父级高度为0时影响下面标准流的盒子。有四种清除浮动的方法。
1）额外标签法/隔墙法【在浮动元素末尾添加一个空标签】
优点：通俗易懂，书写方便，是W3C推荐做法
缺点：添加无意义的标签，结构化较差
<div class="box">
<div class="damao">大毛</div>
<div class="ermao">二毛</div>
<!-- 这个新增的盒子要求必须是块级元素不能是行内元素 -->
<div class="clear"></div>
</div>
<div class="footer"></div>
<style>
/* 父盒子无高度，且里面的元素浮动 */
.box {
width: 800px;
border: 1px solid blue;
margin: 0 auto;
}
.damao {
float: left;
width: 300px;
height: 200px;
background-color: purple;
}
.ermao {
float: left;
width: 200px;
height: 200px;
background-color: pink;
}
/* 中间夹的clear标签 */
.clear {
clear: both;
}
/* 标准流 */
.footer {
height: 200px;
background-color: black;
}
</style>
2）父级添加overflow属性【在浮动的父级添加overflow: hidden;】
优点：代码简洁
缺点：无法解决溢出浮动的部分
/* 改动上面的代码，去掉clear，给父元素加overflow属性 */
.box {
overflow: hidden;
width: 800px;
border: 1px solid blue;
margin: 0 auto;
}
3）父级添加after伪元素
【额外标签法的升级版，通过CSS 在浮动的标签后面加了一个空盒子】
/* 直接复制粘贴在CSS中，在要清除浮动的父盒子使用此类名 */
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* IE6、7专有，照顾低版本浏览器 */
.clearfix {
*zoom: 1;
}
4）父级添加双伪元素
【通过CSS 在浮动的标签前面后面都加了一个空盒子】
/* 直接复制粘贴在CSS中，在要清除浮动的父盒子使用此类名.clearfix */
.clearfix:before,
.clearfix:after {
content: "";
/* 转化为块级元素并在一行显示 */
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
五、定位（position）
- 静态定位 static
默认。标准流，无定位。 - 相对定位 relative
相对于自己原本的位置移动，不脱离标准流，继续保留原来位置。
.box1 {
position: relative;
/* 以自己原来的位置为基准，距离上面100px，距离左边100px */
top: 100px;
left: 100px;
width: 200px;
height: 200px;
background-color: pink;
}
- 绝对定位 absolute
无父亲或父亲无定位，则相对于浏览器可视区的位置定位；父亲有定位，相对于父级的位置定位。绝对定位脱离标准流，不保留原来位置。
<style>
/* 爷爷有定位 */
.yeye {
position: relative;
width: 800px;
height: 800px;
background-color: hotpink;
padding: 50px;
}
/* 父亲无定位 */
.father {
width: 500px;
height: 500px;
background-color: skyblue;
}
/* 儿子以爷爷为准定位，离最近的父元素为准 */
.son {
position: absolute;
left: 30px;
bottom: 10px;
width: 200px;
height: 200px;
background-color: pink;
}
</style>
- 固定定位 fixed
固定于浏览器可视区的位置。脱离标准流，不占有原来的位置。
<div class="fixed"></div>
<div class="w">版心盒子</div>
<style>
.w {
width: 800px;
height: 1400px;
background-color: pink;
margin: 0 auto;
}
.fixed {
/* 实现固定盒子贴在版心右侧的方法： */
position: fixed;
/* 1. 先走浏览器宽度的一半 */
left: 50%;
/* 2. 利用margin走版心盒子宽度的一半距离 */
margin-left: 405px;
width: 50px;
height: 150px;
background-color: skyblue;
}
</style>
- 粘性定位
是相对定位relative和固定定位fixed 的混合，兼容性差（IE不支持）。
<!--
1.以浏览器的可视窗口为参照点移动元素（固定定位特性）
2.粘性定位占有原来的位置（相对定位特性）
3.必须添加top bottom left right其中一个才有效
-->
<style>
.nav {
position: sticky;
/* 当距离上面为0时变为粘性定位 */
top: 0;
width: 800px;
height: 50px;
background-color: pink;
margin: 100px auto;
}
</style>
- 定位堆叠顺序
只有定位的盒子才有堆叠顺序z-index，标准流和浮动的没有。是叠放的优先级，0为最底层，数字越大在更高的层，高层压住底层。
下面例子中熊二的z-index为2，比熊大的1大，所以熊二显示在熊大的上方。
<body>
<div class="box xiongda">熊大</div>
<div class="box xionger">熊二</div>
</body>
<style>
.box {
/* 两者为定位的盒子 */
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
}
.xiongda {
background-color: red;
/* 背景透明度 */
opacity: 0.5;
/* 叠放优先级 */
z-index: 1;
}
.xionger {
background-color: green;
left: 50px;
top: 50px;
z-index: 2;
}
</style>
六、显示与隐藏
- 显示隐藏元素之display
此方法隐藏元素后不再占有原来的位置！
display：none 隐藏
display：block\inline\inline-block 显示
- 显示隐藏元素之visibility
此方法隐藏元素后占有原来的位置！
visibility：hidden 隐藏
visibility：visible 显示
- 显示隐藏元素之overflow
.peppa {
/* 溢出显示 */
overflow: visible;
/* 溢出隐藏 */
overflow: hidden;
/* scroll 溢出的部分显示滚动条 不溢出也显示滚动条 */
overflow: scroll;
/* auto 溢出的时候才显示滚动条 不溢出不显示滚动条 */
overflow: auto;
width: 200px;
height: 200px;
border: 3px solid pink;
margin: 100px auto;
}
七、项目注意事项
- 常见图片格式
1）JPG/JPEG：对色彩的信息保留较好，高清，颜色较多，产品类的图片经常用JPG格式。
2）GIF：最多存储256色，所以通常用来显示简单图形及字体，但是可以保存透明背景和动画效果，常用于一些图片小动画效果。
3）PNG：一种新兴的网络图形格式，结合了GIF和JPEG的优点，具有存储形式丰富的特点，能够保持透明背景。如果想要切成背景透明的图片，选用PNG格式。
4）PSD：是Photoshop专用格式，里面可以存放图层、通道、遮罩等多种设计稿。可以直接从上面复制文字、获得图片、测量大小和距离。 - 导航栏制作方法
在实际开发中，导航栏的制作不会直接用a标签，而是用li包含a，即(li+a)的做法。
li+a语义更清晰，是有条理的列表型内容。
如果直接用a，搜索引擎容易判别为有堆砌关键字的嫌疑（故意堆砌关键字容易被搜索引擎降权），从而影响网站排名。 - 页面布局整体思路
为了提高网页制作的效率，布局时通常有以下整体思路：
1）必须确定页面的版心（可视区），测量设计稿可得。
2）分析页面中的行模块，以及行模块中的列模块，即页面布局第一准则。
3）列模块经常需要浮动布局，要先确定每个列的大小，之后确定列的位置，即页面布局第二准则。
4）制作HTML结构。我们遵循先有结构，后有样式的原则。 - CSS属性书写顺序
建议遵循以下顺序：
1）布局定位属性：display/position/float/clear/visibility/overflow
2）自身属性：width/height/margin/padding/border/background
3）文本属性：color/font/text-decoration/text-align/vertical-align/white-space/break-word
4）其他属性：content/cursor/border-radius/box-shadow/text-shadow/ background:linear-gradient
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
