学习的第三天-CSDN博客

本文链接：https://blog.csdn.net/huster0828/article/details/118963059

一、CSS中的三大特性
二、盒子模型
三、CSS3新增样式
四、浮动(float)
五、常见的网页布局
六、Photoshop切图

一、CSS中的三大特性

1. 层叠性

相同选择器给设置相同的样式，此时一个样式就会覆盖(层叠)另一个冲突的样式。层叠性主要解决样式冲突的问题。

层叠原则

样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式。
样式不冲突，不会层叠。

2. 继承性

CSS中的继承：子标签中会继承父标签的某些样式，如文本颜色何字号。

恰当的使用会简化代码，降低CSS样式的复杂性
子元素可以继承父元素的样式(text-,font-,line-,color)

行高的继承

body {
	font: 12px/1.5 Microsoft YaHei;
}

行高可以跟单位也可以不跟单位
如果子元素没有设置行高，则会继承父元素的行高为1.5
此时子元素的行高是：当前子元素文字大小的1.5倍
body行高1.5倍这样写法的优势是里面子元素可以根据自己文字大小自动调节

3. 优先级

当同一个元素指定多个选择器，就会有优先级的产生

选择器相同，则执行层叠性
选择器不同，则根据选择器权重执行

选择器	选择器权重
继承或者 *	0，0，0，0
元素选择器	0，0，0，1
类选择器，伪类选择器	0，0，1，0
ID选择器	0，1，0，0
行内样式 stytle:""	1,0,0,0
！important	无穷大

注意事项

权重是由四位数字组成，但是不会有进位
可以理解为类选择器永远大于元素选择器 id选择器永远大于类选择器，以此类推
等级判断从左向右，如果某一位数值相同，则判断下一位数值
继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0。

权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重

div ul li ------- 0,0,0,1+0,0,0,1+0,0,0,1=0,0,0,3
.nav ul li ------- 0,0,1,2
a:hover ------- 0,0,1,0

二、盒子模型

2.1 看透网页布局的本质

网页布局过程：

先准备好相关的网页元素，网页元素基本都是盒子Box
利用CSS设置好盒子样式，然后摆放到相应位置
往盒子里面装内容

网页布局的核心本质：利用CSS摆盒子

2.2 盒子模型组成

盒子模型就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个装内容的容器。

CSS盒子魔偶行本质上是一个盒子，封装周围的HTML元素，它包括：边框、外边距、内边距和实际内容。

在这里插入图片描述

2.3 边框(border)

border可以设置元素的边框，边框由三部分组成：边框宽度边框样式边框颜色

属性	作用
boder-width	定义边框粗细，单位是px
boder-stytle	边框的样式
boder-color	边框的颜色

边框样式常用的是：
solid|实线边框
dashed|虚线边框
dotted|点边框

在这里插入图片描述
边框的复合写法
CSS边框属性允许你指定一个元素边框的样式和颜色

border: 1px solid red； 没有顺序

边框的上下左右可以分开设定
border-top/bottom/left/right

2.4 表格的细线边框

border-collapse: collapse;

可以消除重合边框。

2.5 边框会影响盒子实际大小

边框会额外增加盒子的实际大小。因此我们有两种解决方案：

测量盒子大小的时候不测量边框
如果测量的时候包含了边框，则需要减去width/height。

2.6 内边距(padding)

padding属性用于设置内边距，即边框与内容之间的距离。

属性	作用
padding-left	左内边距
padding-right	右内边距
padding-top	上内边距
padding-bottom	下内边距

在这里插入图片描述
内边距简写属性

值的个数	表达意思
padding: 5px	一个值，代表上下左右都有五像素的内边距
padding: 5px 10px	2个值，代表上下内边距是5像素，左右内边距是10 像素
padding: 5px 10px 20px	3个值，代表上内边距5像素左右内边距10像素下内边距20像素
padding: 5px 10px 20px 30px	4个值，上右下左（顺时针）

padding会影响盒子

内容和边框有了距离，添加了内边距
padding影响了盒子的实际大小（撑大了盒子）

padding导航栏的应用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>盒子</title>
    <style>
        .nav {
            height: 41px;
            border-top: 3px solid #ff8500;
            border-bottom: 1px solid #edeef0;
            background-color: #fcfcfc;
            line-height: 41px;
        }

        .nav a {
            display: inline-block;
            height: 41px;
            padding: 0 20px;
            font-size: 12px;
            color: #4c4c4c;
            text-decoration: none;

        }

        .nav a:hover {
            background-color: #eee;
            color: #ff8500;
        }
    </style>
</head>

<body>
    <div class="nav">
        <a href="#">新浪导航</a>
        <a href="#">手机新浪网</a>
        <a href="#">移动客户端</a>
        <a href="#">微博</a>
    </div>
</body>

</html>

在这里插入图片描述
padding不会撑开盒子的情况

只要不指定width和height就不会出现padding撑开盒子的情况。

就算设置了width：100%，也会存在撑大的情况

2.7 外边距(margin)

magin属性用于设置外边距，即控制盒子和盒子之间的距离

属性	作用
margin-left	左外边距
margin-right	右外边距
margin-top	上外边距
margin-bottom	下外边距

margin的简写与padding一样

2.7 外边距典型应用

外边距可以让块级盒子水平居中，但是必须满足两个条件：

盒子必须指定了宽度(wijdth).
盒子左右的外边距都设置为auto.

.header {
	width: 960px;
	margin: 0 atuo;
}

常见的三种写法：

margin-left: autio; margin-right: auto;
margin: auto;
margin: 0 auto;

在这里插入图片描述

注意：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加text-align:center即可

2.8 外边距合并

1. 相邻块元素垂直外边距的合并

当上下相邻的两个块元素(兄弟关系)相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top,则他们之间的垂直间距不是margin-top和margin-bottom之和，而是取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并。

所以在日常的操作中，尽量只给一个盒子添加margin值

2. 嵌套块元素垂直外边距的塌陷

对于两个签到关系(父子关系)的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素也有上外边距，此时父元素会塌陷较大的外边距值。

在这里插入图片描述

解决方案：

可以为父元素定义上边框
可以为父元素定义上内边距
可以为父元素添加overflow:hidden.

2.9 清除内外边距

网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致，因此我们在布局面前，首先要清楚下网页元素的内外边距。

* {
	padding: 0;
	margin:0;	
}

注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以。

三、CSS3新增样式

3.1 圆角边框(重点)

border-radius属性用于设置元素的外边框圆角。

border-radius: length;

参数值可以为数值或百分比
如果是正方形，把数值修改为高度或者宽度的一半即可，或者直接写50%
如果是个矩形，设置为高度的一半即可
该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角。
还可以选择分开写：border-top-left-redius、border-top-right-redius、border-bottom-right-redius、border-bottom-left-redius

radius半径：园与边框交集形成圆角的效果。

在这里插入图片描述

3.2 盒子阴影

CSS3中新增了盒子阴影，我们可以使用box-shadow属性为盒子添加阴影。

值	描述
h-shadow	必需。水平阴影的位置，允许为负值
v-shadow	必需。垂直阴影的位置。允许负值
blur	可选。模糊距离
spread	可选。阴影的尺寸
color	可选。阴影的颜色。
inset	可选。将外部阴影(outset)改为内部阴影

注意：

默认的是外阴影(outside)，但是不可以写这个单词，否则阴影无效
盒子阴影不占用空间，不会影响其他盒子排列

在这里插入图片描述

3.3 文字阴影

text-shadow: h-shadow v-shadow blur color;

值	描述
h-shadow	必需。水平阴影的位置，允许为负值
v-shadow	必需。垂直阴影的位置。允许负值
blur	可选。模糊距离
color	可选。阴影的颜色。

四、浮动(float)

4.1传统网页布局的三种方式

网页布局的本质——用CSS来摆放盒子。把盒子摆放到相应的位置。

CSS提供了三种传统布局方式：

普通流（标准流）
浮动
定位

4.2 标准流(普通流/文档流)

所谓标准流：就是标签按照规定好默认方式排列

块级元素会独占一行，从上到下顺序排列
- 常用元素：div、hr、p、h1、ul、ol、dl、form、table、
行内元素会按照顺序，从左往右顺序排列，碰见父元素边缘则自动换行
- 常用元素：span、a、i、em等

标准流是最基本的布局方式

注意：在实际开发中，一个页面基本都包含了这三种布局方式。

4.3 为什么需要浮动

很多布局效果，标准流没有办法完成，此时就可以利用浮动完成布局。因为浮动可以改变元素标签默认的排列方式。

浮动最典型的应用：可以让多个块元素在一行内显示。

网页布局的第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动

4.4 什么是浮动

float属性用于创建浮动框，将其移动到一边，直到左边缘触及包含块或另一个浮动框的边缘

语法：

选择器 { float:属性值；}

属性值	描述
none	元素不浮动(默认值)
left	元素向左浮动
right	元素向右浮动

在这里插入图片描述

4.5 浮动特性(重要)

浮动元素会脱离标准流(脱标)
- 脱离便准普通流的控制移动到指定位置俗称脱标，浮动的盒子不再保留原先的位置

在这里插入图片描述

浮动的元素会一行内显示并且元素顶部对齐
- 如果多个盒子都设置了浮动，则他们会按照属性值一行内显示并且顶端对齐排列
- 注意：浮动的元素是相互贴在一起的(不会有缝隙)，如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行
浮动的元素会具有行内块元素的特性
- 任何元素都可以浮动。添加浮动后具有行内块元素相似的特性。
- 如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，他的大小根据内容来定。
- 浮动的盒子中间是没有缝隙的，是紧挨在一起的
- 行内元素同理

4.6 浮动元素和标准流父级

浮动元素经常和标准流父级搭配使用
为了约束浮动元素的位置，我们网页布局采用的策略是：
先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则。

在这里插入图片描述

五、常见的网页布局

5.1常见的网页布局

在这里插入图片描述

     ![在这里插入图片描述](https://img-blog.csdnimg.cn/7b5172a1a1c8460a9e6c8487475d18a8.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1c3RlcjA4Mjg=,size_16,color_FFFFFF,t_70)

5.2 浮动布局注意点

浮动和标准流的父盒子搭配
先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置
一个元素浮动了，理论上其余兄弟元素也要浮动
一个盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防止引起问题
浮动盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流

5.3 清除浮动

为什么要清除浮动？

由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子。

由于浮动个元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响

清除浮动的本质

清除浮动的本质时清除浮动元素造成的影响
如果父盒子本身有高度，则不需要清除浮动
清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了

清除浮动语法

选择器 { clear: 属性值；}

属性值	描述
left	不允许左侧有浮动(清除左侧浮动的影响)
right	不允许右侧有浮动元素(清除右侧浮动的影响)
both	同时清除左右两侧浮动的影响

在实际工作中，几乎只用clear: both;

清除浮动的策略就是：闭合浮动

5.4 清除浮动的方法

额外标签法也称为隔墙法，是W3C推荐的做法
父级添加overflow属性
父级添加after伪元素
父级添加双伪元素

1. 额外标签法

额外标签法也称为隔离法，是W3C推荐的做法

额外标签法会在浮动元素末尾添加一个空的标签。

，或者其他标签

优点：通俗易懂，书写方便
缺点：添加许多无意义的标签，结构化较差
注意：要求这个新的空标签必须是块元素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .father {
            width: 500px;
            margin: 0 auto;
            border: 1px solid green;
        }

        .box1 {
            width: 200px;
            height: 200px;
            float: left;
            background-color: pink;
        }

        .box2 {
            width: 200px;
            height: 200px;
            float: left;
            background-color: burlywood;
        }

        .fox {
            width: 600px;
            height: 200px;
            background-color: cadetblue;
        }
        /* 额外标签法 */
        .clear {
            clear: both;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="box1">1</div>
        <div class="box2">2</div>
        <div class="clear"></div>
    </div>

    <div class="fox">

    </div>
</body>

</html>

在这里插入图片描述

2 父级添加overflow

可以给父级添加overflow属性，将其属性设置为hidden、auto或者scroll

优点：代码简洁
缺点：无法显示溢出部分

3. :after为元素法

:after方式是额外标签的升级版，也是给父元素添加

.clearfix:after {
	content: "";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.clearfix {
	/*IE6、7专有*/
	*zoom: 1;
}

优点：没有增加标签，结构更简单
缺点：照顾低版本浏览器

4. 双伪元素清除浮动

.clearfix:before, .clearfix:after {
	content: "";
	display: table;
}

.clearfix: after {
	clear: both;
}
.clearfix {
	*zoom: 1;
}

优点：代码更简洁
缺点：照顾低版本浏览器

六、Photoshop切图

PS有很多的切图方式：图层切图、切片切图、PS插件切图。

4.1 常见的图片格式

jpg	对色彩的信息保留较好，高清，颜色较多，我们产品类的图片经常用jpg格式的
gif	最多只能存储256色，所以通常用来显示简单图形及字体，但是可以保存透明背景和动画效果，实际经常用于一些图片的小动画效果。
png	是一种新兴的网络图形格式，结合了GIF和JPEG的优点，具有存储形式丰富的特点，能够保持透明背景。如果想要切成背景透明的图片，就要选择这个格式

PSD｜是Photoshop的专用格式，里面可以存放图层、通道、遮罩等多种设计稿。对我们前端人员来说最大的优点是我们可以直接从上面复刻文字、获得图片，还可以测量大小和距离