2.css

最新推荐文章于 2024-10-11 15:51:17 发布

超高中级的咸鱼

最新推荐文章于 2024-10-11 15:51:17 发布

阅读量175

点赞数

分类专栏：前端文章标签： css html css3

本文链接：https://blog.csdn.net/qq_17686059/article/details/129776132

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、样式格式：

1.1 内联样式

开发中不推荐使用

<p style="......">
    文本
</p>

1.2 内部样式表

将样式编写至head中的style标签里，然后通过css的选择器来选中元素并为其设置各种样式，可以同时为多个标签设置式，并且修改时只需要修改一处即可-内部样式表更加方便对样式进行复用问题。
我们的内部样式表只能对一个网页起作用，它里边的样式不能跨页面进行复用

<style>
    p{
        ......
    }
    #style1{
        ......
    }
    .style{
        ......
    }
</style>

1.3 外部样式表

可以将Css样式停写到一个外部的Css文件中，然后通过link标签来引入外部的css文件外部样式表需要通过link标密进行引，意味着只要想使用这些样式的网页都可以对其进行引用使样式可以在不同页面之间进行复用

css文件内容即为内部样式表中，style标签内部的内容，不需要写style标签，引用格式：

<link rel="stylesheet" href="./xxx.css">

二、CSS语法

style标签内的内容与html是相互隔离的，两者有不同的语法和结构；

2.1 CSS基本语法：

p{…}

选择器声明块

选择器：通过选择器可以选中页面中的指定元素，比如p的作用就是选中页面中所有的p元素；

声明块：通过声明块来指定要为元素设置的样式，声明块有一个个声明组成，每个声明由名值对组成，以：连接，以；结尾。如background-color : red ;

2.2 常用选择器：

① 元素选择器

根据标签名来选中指定元素，如p、h1等来设置所有段落和一级标题的样式；

语法：标签名{…}

<style>
    p{
        color:red;
    }
</style>
<body>
    <P>我是红色！</P>
</body>

② id选择器

根据元素的id属性值选中一个元素；一个样式只能绑定一个元素的id，错误提示：”重复的 ID 引用“，同时一个元素只能被一个样式绑定，

写法不会报错但是结果也不会有效果，元素的id是唯一性的。

语法：#id属性值{…}

<style>
    #stlye1{
        color:red;
    }
</style>
<body>
    <p>我是正常色！</p>
    <p id="style1">我是红色！</p>       
</body>

③ class选择器

根据元素的class属性值来选中一组元素，多个标签可以共用一个class样式，一个标签也可以同时应用多个class样式；

语法：.class属性值{…}

<style>
    .style{
        color:red;
    }
    .style2{
        font-size:60px;
    }
</style>
<body>
	<p class="style1">我是红色！</p>
    <p class="style1">我也是红色！</p>
    <p class="style1 style2">我不仅是红色，而且我很大！</p>
</body>

④ 通配选择器

选中页面中所有的元素；一般用于设置边框；

语法：*{…}

⑤ 复合选择器

交集选择器

作用：选择所有选择器都满足的标签；

语法：选择器1选择器2选择器3…选择器n{…}

当选择器1-n有标签全都满足时，这时交集选择器后的{}样式会生效，同时选择器1、2、3…n的样式也会生效；

如果有元素选择器，那必须以元素选择器开头，如：p#style1.style2，但是不建议使用元素选择器+id选择器的格式，因为这样是多此一举的，id已经唯一绑定了一个样式，所以常用的格式是元素选择器加多种class选择器，或者多种class选择器的组合。

<style>
    div{
        color:green;
    }
    div.style1{
        font-size:88px;
    }
</style>
<body>
    <div>
        我是绿色的！
    </div>
    <div class="style1">
        我是绿色巨无霸！
    </div>
    <p class="style2">
        这个是不满足条件的，并不是大字体！
    </p>
</body>

并集选择器（组合选择器）

作用：选择满足任一选择器的标签；

语法：选择器1,选择器2,选择器3,…,选择器n{…}

本质就是多种标签共用一个样式，比如：p，div，#style1,.style2{…}，就是所有的p标签、div标签、id为style1的标签，class为style2的标签都会生效这个样式，同样，满足组合选择器中的单个选择器的标签也会生效相应的选择器样式。

⑥ 关系选择器

父元素：直接包含子元素的元素叫做父元素

子元系：直接被父元索包含的元紊是子元紊

祖先元紊：直接或间接包含后代元素的元素叫做祖先元素，一个元素的父元素也是它的相先元素
后代元素：直接或间接被祖先元系包含的元紊叫做后代元素，子元素也是后代元系
兄弟元紊：拥有相同父元素的元素是兄弟元素

子元素选择器

作用：选择满足条件的所有子元素；

语法：选择器1>选择器2{…}

选择器1和2都可以是复合选择器，{}内的样式只对子元素生效；注意：只对子元素（包括子元素的兄弟元素），子元素的子元素是不会生效的

<style>
    div{
        color:red;
    }
    div.style1{
        font-size:80px;
    }
    div.style1 > p{
        color:blue;
        font-size:16px;
    }
</style>
<body>
    <div>
        我是正常的红色！
    </div>
    <div class="style1">
        我是大号红色!
        <p>
            你以为我也是红色？不，我是小号蓝色！
        </p>
    </div>
</body>

后代元素选择器

作用：选择满足条件的所有后代；

语法：选择器1 选择器2{…}

注意是以空格隔开；

<style>
    div{
        color:red;
    }
    .style1{
        color:green;
    }
    div .style1{
        color:blue;
    }
</style>
<body>
<h1 class="style1">我是绿色！</h1>
<div>
    我是红色!
    <p>
        我是蓝色！<br>
        <span class="style1">
            我也是蓝色!
        </span>
    </p>
</div>
</body>

兄弟元素选择器

注意只对选择器1下面的兄弟元素生效，上面的都是塑料兄弟（doge）。

语法：选择器1 + 选择器2{…}

作用：选择满足条件的下面的头一个兄弟元素；第二个兄弟元素不生效

注意：选择器1和选择器2是兄弟关系，

语法：选择器1~选择器2{…}

作用：选择满足条件的下面的所有兄弟元素；（这才叫好兄弟）

<style>
    div{
        color:red;
    }
    div + p{
        color:green;
    }
</style>
<body>
    <p>
        我是div的好兄弟，但是我是黑色？！
    </p>
    <div>
        我是红色！
    </div>
    <P>
        我才是div的好兄弟，我是绿色的！
    </P>
    <p>
        我是还是黑色....
    </p>
</body>

<style>
    div~.style1{
        font-size:55px;
        color:red;
    }
</style>
<body>
<div>
    我是你们大哥！
</div>
<div class="style1">
    我是大红！
</div>
<p class="style1">
    我也是大红！
</p>
<span>但我不是！</span>
</body>

⑦ 属性选择器

[属性名]{…} 选择设定了指定属性的元素
[属性名=展性值]{…} 选择设定了指定厚性和属性值的元素

[属性名^=值]{…} 选择属性值以指定值开头的元素

[属性名$=值]{…} 选择属性值以指定值结尾的元素

[属性名*=值]{…} 选择属性值中含有某值的元素的元素

可与前面的选择器复合使用；

<style>
    p[title]{
        font-size:88px;
    }
    p[title="hello"]{
        color:red;
    }
</style>
<body>
    <p>
        我是正常文本！
    </p>
    <p title="123">
        我设置了title属性，我很大！
    </p>
    <p title="hello">
        我设置了title属性而且属性值为hello，我很大而且很红！
    </p>
    <div title="hello">
        我并不符合条件，我赛普斯！
    </div>
</body>

⑧ 伪类选择器

伪类：不存在的类，特殊的类，伪类用来描述一个元素的特殊状态，如第一个子元素、被点击的元素、鼠标移入的元素等…

.（点）代表着类，而:（冒号）代表着伪类；

类名是用户自己定义的，使用时标签需要写明class值，伪类是css提供的，类似于属性，标签不需要特地写明伪类值。

子元素相关伪类：

:first-child 第一个子元素；

:last-child 最后一个子元素；

:only-child 只有一个子元素的元素

:nth-child() 选择特定子元素

()内的值：

具体数字n 第n个子元素；

2n或even 选择偶数位子元素；

2n+1或odd 选中奇数位子元素；

注意，上述子元素伪类是在所有子元素中排序的；例如下面：

<style>
    ul>li:first-child{
        color:red;
    }
</style>
<body>
    <ul>
        <span>红色？不是！</span>
        <li>红色？也不是！</li>
        <li>xxxxx</li>
    </ul>
</body>

ul中所有子元素的第一个，同时这个元素必须是li才生效。

我的理解是，子元素的伪类选择器冒号会和前一个选择器（设为A）当做交集选择器来绑定，前两个至最前面的选择器才是父元素主体，以:nth-child(3)为例，只有父元素主体的第三个子元素，同时这个子元素还必须满足选择器A，才能被选中。

比如说：.s1 .s2 .s3:nth-child(3){…}

父元素主体是.s1 .s2 即满足类s1的元素的所有满足类s2的后代元素，

父元素主体的第三个子元素如果也满足类s3，那么可以被选中，否则不能。

如果是单个选择器加子元素伪类的形式，比如说div:first-child{…} 这时的子元素伪类依然和前一个选择器div绑定，父元素主体为空，可以是任一元素，也就是说任一元素，如果他的第一个子元素是div，那么这个样式就能生效。

否定伪类：

:not() 符合条件的元素从选择器中去除；

<style>
    ul>li:not(:nth-child(3)){
        color:red;
    }
</style>
<body>
    <ul>
        <span>红色！</span>
        <li>红色！</li>
        <li>黑色！</li>
        <li>红色！</li>
    </ul>
</body>

超链接伪类：

a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接，为了包含用户隐私，这个伪类只能修改字体颜色；
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻

link和visited是超链接独有，hover和active其他元素也能用；

<style>
        *:hover{
            color:#00F7DE;
        }
        a:hover{
            font-size: 33px;
        }
        a:active{
            color: red;
        }
</style>
<body>
<p>翻译一下什么叫惊喜</p>
<a href="https://www.baidu.com">点击一哈有惊喜！</a>
</body>

在这里插入图片描述

⑨ 伪元素选择器

伪元素，表示页面中一些特殊的并不真实存在的元素（特殊的位置）

语法 :: (双冒号)

::first-letter 首字母

::first-line 首行

::selection 选中的内容

::before 元素的开始

::after 元素的最后

before和after需要配合content属性来使用，

使用css在开始或结尾添加内容并设置其样式

<style>
    h1::before{
        content:'『'
    }
    h1::after{
        content:'』'
    }
</style>
<body>
    <h1>
        hello,world!
    </h1>
</body>

⑩ 选择器器符号汇总

元素选择器：相应标签

id选择器： #xxx （井号）

class选择器： .xxx （点）

通配选择器： * （星号）

交集选择器：选择器1选择器2（无符号）

并集（组合）选择器：选择器1 , 选择器2（逗号）

子元素选择器：选择器1>选择器2 大于号）

后代元素选择器：选择器1 选择器2（空格）

兄弟元素选择器(首个兄弟元素）选择器1+选择器2 （加号）

兄弟元素选择器(所有兄弟元素) 选择器~选择器2（波浪号）

属性选择器： [属性相关正则表达式]

伪类选择器： :xxx （冒号）

伪元素选择器： ::xxx （双冒号）

体会整体与局部的思想，除伪类伪元素选择器外，任何选择器符号两边的部分都可以看成一个复合选择器

eg：

<style>
    div.s1>.s2+.s3 .s4,.s5[title]{
        ......;
    }
</style>
/*
说人话就是为【类为s1的div元素的子元素中的满足类为s2的兄弟元素中的首个满足类为s3的元素的后代元素中满足类为s4的元素】或者【类为s5且设置了title属性的元素】设置样式。
*/

2.3 继承、选择器权重

2.3.1 继承

样式的继承，一个元素设置的样式同时也会应用到其后代元素上；

并不是所有的样式都会被继承，比如背景相关的、布局相关的样式

2.3.2 选择器权重

样式冲突时，生效与否由选择器的权重（优先级）决定；

选择器权重值：

内联样式： 1,0,0,0
id选择器： 0,1,0,0
类和伪类选择器： 0,0,1,0
元素选择器： 0,0,0,1
通配选择器: 0,0,0,0 (即任何选择器都可以把他覆盖)
继承的样式没有优先级

比较优先级时，交集选择器是将各种权重值相加计算，优先值越高越优先显示，并集（分组）选择器单独计算。

如果优先值计算相等，则优先使用靠下的样式；

注意：再怎么相加，都不会跨级，11个类选择器的交集并不会超过一个id选择器。

<style>
    div{
        color:red;
    }
    div.s1{
        color:green;
    }
    .s2{
        font-size:80px;
    }
    .s3{
        font-size:16px;
    }
</style>
<body>
    <div class="s1 s2 s3">
        绿色小号
    </div>
</body>

注注意:在某个样式后面加上 !important ,此时该样式会获得最高的优先级，甚至超过内联样式；

但是开发中这个东西要慎用！！

<style>
    div{
        color:red;
        font-size:80px !important;
    }
</style>
<body>
    <div style="color:blue;font-size:16px;">
        我是大号蓝色!
    </div>
</body>

2.4 单位

① 像素px

不同的屏幕像素点的大小是不一样的,像素越小显示越细腻；

② em

相对于自身元素字体大小来计算的，即1em=1font-size；

em会根据字体大小的改变而改变；

③ rem

相对于根元素的字体大小来计算。即html元素的字体大小；

④ 颜色单位

颜色名
- red、green、blue、yellow等
rgb(int r, int g, int b)
- 红，蓝，绿；
- 值范围0-255；
rgba(int r, int g, int b, double a)
- 红，蓝，绿，不透明度；
- 不透明度范围是0-1
#rrggbb，
- 三对16进制数表示rgb，00-FF，如果两个数字一样可以简写，如#aabbcc > #abc
HSL值、HSLA值：
- H色相是一个颜色环，始于红色终于红色，值是0-360；
- S饱和度，颜色的浓度，0-100%，0%变成灰色，黑白照片那种。
- L亮度，颜色的亮度，0-100%，0%纯黑，100%纯白；
- A不透明度，同上，0-1

⑤ 百分比%

可以将属性值设置成相对于父元素属性值的百分比，设置百分比可以使子元素跟随父元素的改变而改变；

三、布局

3.1 文档流（normal flow）

网页是一个多层的结构,一层招着一层通过css可以分别为每一层来设置样式作为用户来讲只能看到最顶上一层，这些层中最底下的一层称为文档流，文档流是网页的基础我们所创建的元素默认都是在文档流中进行排列
对于我们来元素主要有两个状态：

在文档流中
不在文档流中（脱离文档流)

元素在文档流中的特点：

块元素
- 块元素页面中独占一行；
- 默认宽度是父元素的全部（把父元素填满）
- 默认高度被内容撑开，比如说多少行就多少行的高度。
行内元素
- 行内元素不会独占一行。至左向右水平排列；
- 行内元素的高度和宽度都是被内容撑开；

3.2 盒子模型（box model）

CSS将页面中的所有元素都设置为一个矩形的盒子；

将元素设置为矩形的盒子后，将页面的布局就变成将不同的盒子放到不同的位置；

盒子的构成：

在这里插入图片描述

Content(内容) - 盒子的内容，显示文本和图像。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Margin(外边距) - 清除边框外的区域，外边距是透明的。

① 内容区（content）

元素中的所有子元素和文本内容都在内容区排列，内容区的大小由height和width确定

② 边框（border）

border-width：边框的宽度：

除了像素、em，rem、百分比等，属性值还可以使用thin、medium、 thick
属性值：
- 单值时，四周的宽度；
- 四值时，依次为上、右、下、左（顺时针）的宽度；
- 三值时，依次为上、左右、下的宽度；
- 二值时，依次为上下、左右的宽度；
border-xxx-width：xxx可以是top、bottom、left、right，单独指定上下左右的边框宽，默认值medium；

border-color：边框的颜色

值的数量规则和边框宽度一样；值用空格隔开；
border-xxx-color规则同上；
默认颜色是color（前景色）的颜色，字体也是这个色（未设定默认为黑色）；

border-style：边框的样式

无默认样式，准确地说，默认值为none，即啥都不显示；
值的数量规则和边框宽度一样；值用空格隔开；
border-xxx-style规则同上；
属性值：
- solid：实线；
- dotted：点虚线；
- dashed：虚线；
- double：双线；

<style>
        .box1{
            background-color: #00F7DE;
            width:200px;
            height: 200px;
            border-width: 10px;
            border-color: red green blue black;
            border-style: solid dotted dashed double;
        }
</style>

效果如下：

在这里插入图片描述

border属性可以简写，没有顺序要求！！！好家伙）不过简写值必须是单值。例如：

border:10px solid green;
border-left:5px red dotted;

③ 内边距（padding）

内容区和边框之间的距离为内边距，同样，可以为四个方向单独设置（-top、-bottom、-left、-right）；
padding属性即为设置内边距宽度的属性，值的个数规则和前面是一样的；未设置padding时默认为0px；
内边距是透明的，所以内容区的背景颜色会延伸到内边距上；但是内容区文本或者子元素不会延伸贴近边框；所以可以通过文本离边框的距离来大致判断内边距的距离；
盒子的可见部分是由边框、内边距和内容区构成的（间接说明外边距是不可见的，后面细说），盒子的大小并不是指内容区的大小，而是指可见部分的大小；

<style>
        .box1 {
            background-color: #00F7DE;
            width: 200px;
            height: 200px;
            border: 10px red solid;
            padding:100px
        }
</style>
<body>
<div class="box1">
    文本内容从这里开始，注意它离四周边框的距离，这段距离就是内边距100px
</div>
</body>

效果如下：

在这里插入图片描述

④ 外边距（margin）

外边距是透明不可见的，不会影响盒子的可见部分的大小，但是会影响盒子的位置；
margin-xxx，（top、bottom、left、right）设置上下左右外边距；元素在页面中是从左到右从上到下排列的，所以设置正值的左和上外边距时，移动的时元素自己，而设置正值的右和下外边距时是移动其他元素；设置负值会往相反方向移动（很可能会被其他元素挡住或挡住其他元素）
margin简写属性，值的数量规则和前面一样；

⑤ 盒子的大小

盒子可见区域的大小由内容区、内边距和边框决定；默认情况下width和height用来设置内容区的大小：

box sizing属性：

可选值：

content-box 默认情况

border-box 此时width和height将用于设置内容区、内边距和边框的总大小，即可见区域的尺寸；

⑥ 轮廓阴影和圆角

outline用于设置轮廓，用法与border一致，与border不一样的是，它不会影响盒子内容的大小，即不会挤占元素（所以说它可能会覆盖其他元素）

box-shadow用于设置元素阴影，由偏移量和颜色构成，偏移量为0或未设置时，阴影在元素的正下方

第一个值：水平偏移量，正值为右，负值为左；
第二个值：垂直偏移量，正值为下，负值为上；
第三个值：阴影的模糊半径；
第四个值：阴影颜色

eg：box shadow：10px 20px rgba(0,0,0,0.3)；

在这里插入图片描述

eg：box shadow：10px 20px 30px rgba(0,0,0,0.3)；

在这里插入图片描述

border-radius用于设置圆角：

四个值时：左上、右上、右下、左下
三个值时：左上、右上和左下、右下
两个值时：左上和右下、右上和左下
一个值时：全部

同时每个值还可以写成 xx/xx px的形式，/前面是水平方向的，/后面是垂直方向的，两值不同就成了椭圆。

border-radius：50%：元素变成原形

默认情况下是同时设置四个角，也可以通过border-top-right等单独设置四个角；

3.3 水平方向布局

元素在父元素水平方向的位置由以下属性共同决定：

margin-left
border-left-width
padding-left
width
padding-right
border-right-width
margin-right

特点：

上述七个值的和必须和父元素的内容区的宽度相等；
如果这七个值中没有为 auto的情况，则浏览器会自动调整margin-right值以使等式满足；
7个值中，width的值默认是auto，border-xxx-width默认值是medium，但只有在border设置了非none的border-style情况下才显示，没有设置border-style，默认为none，边框也就不显示（宽度为0）。其余默认0；
如果width，margin都为为auto，width优先，margin为0不变，width拉满，即子元素宽度会填充父元素的内容区。
如果width设置了宽度，margin-left为auto时，子元素内容会挤到最右边，同理margin-right为auto时，子元素内容会挤到最左边，margin-left和margin-right都设置为auto时，子元素内容居中；

3.4 垂直方向布局

① 子元素溢出

父元素不设置高度height时，其高度会被子元素撑开；

如果父元素设置了高度，但是子元素高度大于父元素，则会出现子元素溢出，可以对父元素设置overflow属性来处理溢出问题：overflow属性值：

visible，默认值，子元素从父元素中溢出时，子元素会在父元素外部位置显示；
hidden，子元素从父元素中溢出时，溢出部分会被截掉；
scroll，生成两个滚动条，通过滚动条来查看完整内容；
auto，根据需要来生成滚动条，哪边溢出生成哪边；

② 外边距重叠

垂直方向相邻元素上下外边距的重叠问题：和word里段前段后类似：

兄弟元素间相邻垂直外边距；
- 两者都是正值取两者的最大值，一正一负取两者和，全是负数取两者绝对值大的负数（注意最后还是负的）；
- 兄弟元素间的外边距的重叠对于开发来说是有利的；
父子元素间相邻垂直外边距；
- 水平方向来说，子元素的外边距（正值）是被包含在父元素的内容区的，而垂直方向就不同了，当父子元素都没有设置边框，这时的父子元素的外边距会合并，即设置子元素的上外边距，不会使得子元素内容区和父元素内容区的上边分离，而是会导致父子元素一起下移，直观体验就是子元素的外边距转化为了父元素的外边距；
- 可以通过以下方法解决（目前都不是完美的方法，学到后面再补充）：
  - 1、设置父元素边框样式（设置颜色和宽度无效，因为边框样式默认是none），这时父子元素不再共用上外边距，子元素的上外边距被包含在父元素内容区里
  - 2、设置父元素padding-top和height，设置padding-top视觉上会使得父子元素上下分离，但是这样设置会增加父元素的高度（已经设置父元素高度的情况下），所以可以相应缩减height，可以达到预期效果；注意：如果子元素设置了背景色，那设置子元素的padding-top，可能不会达到预期效果，因为padding区域的颜色会从子元素延伸，这样设置看起来子元素和父元素还是黏在一起；
  - 3、（已经学到后面了，前来补充），方法1是将父元素和子元素的外边距通过父元素的边框来隔开，那么也可以给父元素设置before伪类，也可以达到隔开的效果，但是before的content必须要有内容（空格不行），因为没有内容就没有高度，无法达到隔开的目的，但是添加了内容破坏了原有结构。可以设置display：table，可以无内容达到目的。
```
<style>
        .father{
            background-color: #fba;
            width: 600px;
            height: 300px;
        }
        .son1{
            /*子元素设置外边距50px*/
            margin-top: 50px;
            background-color: #1E9FFF;
            width: 300px;
            height: 150px;
        }
</style>
<body>
<div class="father">
    <div class="son1">
    </div>
</div>
</body>
```
效果如下：显然子元素的外边距与父元素外边距合并了

方案一：设置父元素的边框样式(1px white solid)

方案二：删去子元素中的外边距设置，设置父元素padding-top:50px; 设置父元素height：250px

3.5 行内元素的盒子模型

行内元素不支持设置宽度和高度，它们由内容自动撑开；

<style>
        .s1{
            width: 100px;
            height: 50px;
            background-color: yellow;
        }
        .s2{
            width: 100px;
            height: 50px;
            background-color: green;
        }
</style>
<body>
<span class="s1">hello</span>
<span class="s1">world!</span>
<div class="s2">hello,world!</div>
</body>

在这里插入图片描述

行内元素可以设置padding、border、margin，而且垂直方向不会影响页面布局，即不会将其他元素撑开，但是可能会覆盖其他元素；

<style>
        .s1{
            width: 100px;
            height: 50px;
            background-color: yellow;
        }
        .s1plus{
            border: black 2px solid;
            padding:50px;
            margin: 50px;
            width: 100px;
            height: 50px;
            background-color: yellow;
        }
        .s2{
            width: 100px;
            height: 50px;
            background-color: green;
        }
</style>
<body>
<span class="s1plus">hello</span>
<span class="s1">world!</span>
<div class="s2">hello,world!</div>
</body>

在这里插入图片描述

上图可以看出，内容区的垂直位置不会变，margin，padding向上下延伸。

行内元素想要设置宽高，可以使用display属性，display属性用来设置元素显示的类型；
- display : inline 将元素设置为行内元素；
- display : block 将元素设置为块元素；
- display : inline-block 将元素设置为行内块元素；既可以设置宽高度，也不会独占一行；
- display : table 将元素设置为一个表格；
- display : none 元素不在页面中显示，不占位置，用于隐藏；
  - visibility : visible 默认值，正常显示；
  - visibility : hidden 元素不在页面中显示，但是依然占着位置；

3.6 浮动

① float属性

；通过float属性，可以使一个元素向其父元素的左侧或右侧移动，此时，该元素会完成从文档流中脱离（类似于word中的“浮于文字上方”），即不占用文档流的位置，所以元素下方还在的文档流元素会上移。设置浮动后，水平布局的等式不需要强制成立，比如说块元素独占一行，没有设置margin-right时，其值会自动填充，设置了浮动后，该值变成0，即右边还可以放浮动元素

② 浮动的特点：

浮动元素会脱离文档流，不占用文档流中的位置
设置浮动后，元素会向父元素的左侧或右侧移动
浮动元素不会从父元素中移出
浮动元素向左或向右移动时，不会超过已经存在的浮动元素
浮动是水平浮动的，当浮动元素在水平方向排列不下时。排列不下的浮动元素会向下浮动一层
浮动元素不会超过它上面的浮动兄弟元素，最多和它一样高
浮动元素不会覆盖文字，文字会在浮动元素旁环绕

脱离文档流的特点：

块元素不再占用页面的一行，未设置宽高情况下，宽高会被内容撑开
行内元素脱离文档流后，可以设置宽高了，和块元素类似
脱离文档流后，不需要再区分块元素和行内元素

③ clear属性

如果不希望某个元素因为其他元素的浮动影响而改变其位置，可以通过clear属性来清除浮动元素对当前元素产生的影响：

可选值：

left/right，浮动元素往那边浮动，受影响元素就可以设置那边的clear属性值
both，清除两侧影响中最大的那一侧

原理：设置clear属性后，浏览器会自动为元素添加一个上外边

3.7 高度塌陷、BFC

一般元素的高度不会写死，一般的需求是元素的高度被内容撑开，内容多盒子就高点，内容少盒子就低点。

高度塌陷的问题:

在浮动布局中,父元素的高度默认是被子元素撑开的
当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离将会无法撑起父元素的高度，导致父元素的高度丢失
父元素丢失之后，其下方的元素会自动上移，导致布局混乱

解决方案：

1、BFC(Block Formatting Context)块级格式化环境

BFC是一个css中的一个隐含的属性，可以为一个元素开启BFC
开启BFC该元素会变成一个独立的布局区域

开启BFC后元素的特点：

开启BFC的元素不会被浮动元素覆盖
开启BFC的元素可以包含浮动的子元素，即可以被浮动元素撑开
开启BFC的元素，子元素和父元素外边距不会重叠（给父元素设置）

可以通过一些特殊方式来开启元素的BFC：

（不推荐）子元素设置浮动，可以将父元素也设置浮动，这时父元素可以开启BFC，即父元素可以包含浮动子元素，高度不再塌陷，但是父元素会从文档流脱离，父元素下面的元素会挤上来
（不推荐）将父元素设置为行内块元素，即display：incline-block，设置后高度不会塌陷，也不会脱离文档流，但是原本独占一行的父元素会收缩（即子元素们多大他就变得多大）
（常用）将父元素的overflow设置为一个非visible的值。刚好复习一下overflow的属性值:
- visible，默认值，子元素从父元素中溢出时，子元素会在父元素外部位置显示；此处设置无效
- hidden，子元素从父元素中溢出时，溢出部分会被截掉；此处设置可以较完美解决高度塌陷
- scroll，生成两个滚动条，通过滚动条来查看完整内容；此处设置可以解决高度塌陷，但是父元素下方和右方会出现两个条
- auto，根据需要来生成滚动条，哪边溢出生成哪边；此处设置可以较完美解决高度塌陷
开启情况还有很多，可以去查zeal

2、after伪类（比较完美的方案）

思路：在浮动元素下面添加一个元素，由于浮动，该元素的位置会受到影响，那么给这个元素设置clear属性，这个元素跑到浮动元素下面，同时把父元素高度给撑开了，解决了高度塌陷问题；

但是这种方法需要添加一个不相干的元素，破坏了原有结构。

可以通过after伪类的达到上述效果：

给浮动元素的样式追加after伪类：

.box::after{
    content:''; //空着，没必要写
    display:block; //after伪类是行内元素，默认是在元素右侧，不会跑到下面去
    clear:both;
}

设置完后，其实这个父元素已经处于BFC状态了

结合前面的外边距重叠问题，可以通过以下设置同时来解决高度塌陷和外边距重叠问题：

.clearfix::before,.clearfix::after{
    content:'';
    display:table;
    clear:both;
}

3.8 定位（position）属性

定位是一个更加高级的布局手段，可以将元素摆放至页面的任意位置

可选值：

static：默认值，元素是静止的，没有开启定位；
relative：相对定位
absolute：绝对定位
fixed：固定定位
sticky：粘滞定位

偏移量有top、bottom、left和right（只有开启定位才能使用这些属性），偏移量只是本元素相对于定位位置移动，不影响其他元素。

① relative相对定位

元素开启相对定位后，如果不设置偏移量，元素不会发生任何变化。
相对定位的定位位置是本身（即没有设置偏移量时的位置）
相对定位会提升元素的层级，（高于其他元素）
相对定位不会脱离文档流
相对定位不会改变元素性质

② absolute绝对定位

元素开启绝对定位后，如果不设置偏移量，元素的位置不会发生变化
开启绝对定位后，元素会从文档流中脱离
绝对定位会改变元素的性质，行内变成块，宽高由内容撑开
绝对定位会提升元素的层级
绝对定位的定位位置是包含块
- 正常情况下，包含块就是离当前元素最近的祖先块元素，
- 绝对定位的包含块，就是离它最近的开了定位的祖先块元素，如果都没开，则相对于根元素（html）进行定位。

③ fixed固定定位

固定定位也是一种绝对定位，所以固定定位的大部分特点都和绝对定位一样；
唯一不同的是，固定定位永远参照于浏览器的视口进行定位。
- 浏览器视口：即可视窗口
- 这就意味着固定定位的元素，它不会随着浏览器滚动条的滚动而改变位置，它会一直”固定“在那

在这里插入图片描述

④ sticky粘滞定位

粘滞定位和相对定位特点基本一致；
不同的是粘滞定位可以在元素到达距离视口边缘某个位置时将其固定，注意，只能粘滞在父元素内，不会像固定定位一样脱离父元素，设置的距离也要小于默认距离，不然没有效果

看图

eg：box2,3,4都设置的粘滞定位，top都是100px

在这里插入图片描述

eg：box1设置粘滞定位，top为10px

在这里插入图片描述

⑤ 开绝对定位后的布局

当我们开启了绝对定位后:
水平方向的布局等式就需要添加left 和 right两个值，此时规则和之前一样只是多添加了两个值:

xxx+xx+xx+xxx+xx+…+…=包含块的宽度
当发生过度约束，如果9个值中没有auto，则自动调整right值以使等式满足；如果有auto，则自动调整auto的值以使等式满足
可设置auto的值：margin width left right

此外，垂直方向的布局也要满足等式，top/bottom、right/left默认值是auto

因此。绝对定位元素，固定：宽度、高度、top、bottom、right和left，将margin设置为auto可以实现元素相对于包含块的垂直水平居中

⑥ 元素的层级

对于开启了定位的元素，可以通过z-index来设置元素的层级

z-index需要一个整数作为参数，值越大元素的层级越高，越优先显示。
如果元素层级一样，则优先显示结构上靠下的元素。
祖先元素的层级再高，也不会盖住后代元素

四细节深入

4.1 字体

① 字体相关样式

color：用于设置字体颜色
font-size：设置字体的大小
- em相对于当前元素的一个font-size
- rem相对于根元素的一个font-size
font-family：字体族、字体的格式

可选值：

字体的分类：
- serif：衬线字体；
- sans-serif：非衬线字体
- monospace：等宽字体
可以同时指定多个字体，多个字体间使用，隔开，字体生效时优先使用第一个，第一个无法使用则使用第二个，以此类推。

font-face：可以将服务器中的字体直接提供给用户去使用

<style>
@font-face{
    /*指定字体的名字*/
    font-family:'xxx';
    /* 服务器中字体的路径*/
    src:url('xxx');
}
.xxx{
    ...
    font-family:xxx;
}
</style>

line-height：行高，指文字占有的实际高度
- 行高可以指定一个具体大小（px，em）
- 行高也可以设置一个整数，表示行高为字体的指定倍数
- 字体框：字体存在的格子，font-size实际上设置的就是字体框的高度
- 行高会在字体框上下平均分配，因此可以将行高设置得和父元素高度一样，达到字体在父元素中垂直居中的效果
font-weight：字重，字体的粗细
- normal：默认值，不加粗
- bold：加粗
- 100-900：九个级别
font-style：字体风格
- normal：默认值
- italic：斜体

字体简写属性

font:[font-style] [font-weight] font-size/[line-height] font-family;
/*eg:*/
font:italic bold 24px/48px 'Times New Roman';

② 图标字体iconfont

在网页中经常需要使用一些图标，可以通过图片来引入图标但是图片大小本身比较大,并且非常的不灵活

所以在使用图标时,我们还可以将图标直接设置为字体,然后通过font-face的形式来对字体进行引入，这样我们就可以通过使用字体的形式来使用图标

图标库：
- 阿里矢量图标库：iconfont-阿里巴巴矢量图标库
- Font Awesome： Font Awesome

Font Awesome使用步骤

前往官网下载
解压
将css和webfonts移动到项目中
将css文件夹中的all.css引入网页中
使用图标字体
- 1、直接通过类名来使用；标签为i或者span，类名为fas 或 fab 加图标名字，图标名字可以通过zeal去查询
```
<i class='fas fa-plane' style="font-size: 50px;color: #1E9FFF"></i>
```
- 2、通过伪元素来使用：
  - 找到需要设置图标的元素，通过before或after选中；
  - 在content中设置图标字体的编码，前面加\
  - 设置字体的样式，font-family和font-weight（可以去all.css中查询）
- 3、通过实体来使用
  - 类名为fas或fab
  - &#x + 图标的编码
```
<span class='fas'>&#xf0f3</span>
```

阿里矢量图标库

注意版权！

添加至购物车
添加至项目
下载至本地
导入到项目
导入iconfont.css至网页
使用方式与font awesome类似，官网也有指导

4.2 文本

① 文本的水平和垂直对齐

text-align 文本水平对齐
- left 左对齐（右边可能有缺口）
- right 右对齐（左边可能有缺口）
- center 居中
- justify 两端对齐（即文字无缺口）
vertical-align 文本垂直对齐
- baseline 基线对齐（默认）
- top
- bottom
- middle
- 值
可以给图片设置vertical-align，消除底部间隙

② 其他文本样式

text-decoration 文本修饰
- none 什么都没有，可用来消除超链接下划线
- underline 下划线
- line-through 删除线
- overline 上划线
- 可以附加颜色值，线型
white-space 设置网页如何处理空白
- normal 正常
- nowarp 不换行
- pre 保留空白
text-overflow 设置文本溢出部分的格式，文本溢出属性不会强制发生溢出。要使文本溢出它的容器，必须设置其他CSS属性：overflow溢出和white-space空白

overflow: hidden;
white-space: nowrap;

text-overflow属性只影响在块容器元素的内联进程方向溢出的内容

可选值：
- ellipsis 省略号
- fade 这个关键字剪辑溢出的内联内容，并在行框边缘附近应用淡出效果，边缘处完全透明
- clip 默认值

③ 练习：京东顶部导航条

4.3 背景

① 背景基础

background-color：设置背景颜色；
background-image：设置背景图片，值为url(l路径)；

eg：

background-image: url("./img/test.png")

注：background-color与background-image可以同时设置；

背景图片尺寸小于元素时，图片会自动平铺（显示多张）；

背景图片尺寸大于元素时，图片会显示不全。

在这里插入图片描述

background-repeat：用来设置背景的重复方式；
- repeat：默认值，背景沿着x轴、y轴双向重复；
- no-repeat：不重复
- repeat-x：沿x轴方向重复
- repeat-y: 沿y轴
background-position：设置背景图的位置
- 将背景区域划分为9宫格，必须指定两个值，分别为水平和垂直方向；若只写一个，第二个值默认center；
- 方位值：top、right、bottom、left、center，
- 偏移量：以左上角为起点

eg：

background-repeat: no-repeat;
background-position: left bottom;

background-repeat: no-repeat;
background-position: 0px -100px;

在这里插入图片描述

background-clip：设置背景的范围；
- border-box：默认值，背景会出现在边框的下方；
- padding-box：背景不会出现在边框，只出现在内容区和内边距；
- content-box：背景只出现在内容区；（扩散至padding的颜色也会消失）
background-origin：设置背景图片漂移量圆点；
- padding-box：默认值，background-position从内边距处开始计算；
- content-box：背景图片的偏移量从内容区处计算；
- border-box：背景图片的偏移量从边框处开始计算；

在这里插入图片描述

background-size：设置背景图的大小；
- 数值
  - 第一个值表示宽度；
  - 第二个值表示高度；
  - 值为auto时，会跟随图片的尺寸改变；
  - 只写一个值，第二个值默认是auto；即宽度固定，高度按照图片比例自动缩放；
  - 设置100% 100% 可以将图片填充满元素块；

在这里插入图片描述

- 预设关键字：
  - cover：图片比例不变，把元素铺满；
  - contain：图片比例不变，将图片在元素中完整显示；

在这里插入图片描述

background-attachment：背景图片是否随着元素移动；
- scroll：默认值，背景图片会跟随元素移动；
- fixed：固定，不跟随元素移动；

在这里插入图片描述

练习：按钮点击图片变化

思路：

link、hover、active三个状态设置三个图片变化；（会有图片闪烁问题）
将三个图片水平合成一个图片，设置偏移量来实现；（无图片闪烁问题）在网页中使用广泛，这种图片称为CSS Sprite 雪碧图

② 背景渐变

通过渐变可以设置一些复杂的背景颜色，可以实现从一个颜色向其他颜色过渡的效果；

注意：渐变是图片，需要通过background-image来设置；

1. 线性渐变

颜色沿着一条直线发生变化，通过line-gradient()来设置；

line-gradient的属性值：

两值语法：

颜色1从上至下渐变到颜色2。
```
background-image:linear-gradiant(颜色1,颜色2)
```
三值语法：

可指定渐变方向，颜色1渐变至颜色2；
```
background-image:linear-gradient(方向,颜色1,颜色2)
```
方向可选值：
- to left
- to right
- to top
- to bottom
- to 方向关键词1 方向关键词2
- xx deg：指定角度渐变，从0至360，顺时针变化
  - 0deg ↑
  - 90deg →
  - 180deg ↓
  - 270deg ←
- xx turn：表示旋转圈数；0圈就是0deg，0.5圈就是180deg；

指定多个颜色，多个颜色默认情况下平均分布，也可以手动指定渐变的分布情况；

background-image: linear-gradient(0deg,blue,aqua,#bfa,pink);

 background-image: linear-gradient(blue 20px,aqua 50px);
/* 像素值表示的是，渐变开始位置，也是颜色最纯的位置 */

repeating-linear-gradient
- 搭配上面那个用法，如果元素尺寸比较大，可通过repeating-linear-gradient来重复性的平铺开来；

在这里插入图片描述

2. 径向渐变

radial-gradient() 由某点为辐射中心，向四周延伸渐变；大体用法与线性渐变类似；

显然，角度deg的设置不在适用；
可指定渐变的形状
- 默认情况是根据元素尺寸来渐变的，长方形就是椭圆渐变，正方形就是圆形渐变；
- circle：圆形
- ellipse：椭圆
```
background-image: radial-gradient( circle,blue,aqua);
```

可手动指定径向渐变的大小；

background-image: radial-gradient(50px  30px, blue,aqua);

同样，通过repeating-radial-gradient()来设置重复平铺；
可手动指定渐变中心的位置

使用at，值可以是像素值，也可以是方向值
```
background-image: radial-gradient(50px 50px at 0 0 ,red ,yellow);
```
渐变大小的其他可选值
- closest-side：近边；
- closest-corner：近角；
- farthest-side：远边；
- farthest-Corner：远角；

总结大致语法如下：

radial-gradient(大小 at 位置，颜色 位置，颜色，位置...)

在这里插入图片描述

4.4 表格

① 基础

这部分是对前面html的补充；

table：表格标签
tr：行标签
td：列标签

合并单元格：

colspan：合并行；
rowspan：合并列；

在这里插入图片描述

② 长表格

在table标签中，还可以将一个表格分成下面三部分：

thead：头部；
tbody：主体；
tfoot：底部；

tr和td标签可以写入上述标签当中；

上述三个部分标签的顺序是无关紧要的，最后都会生成固定的结构；

th表示头部的单元格；

③ 表格的样式

table标签也是一个块元素；

border-spacing：设定边块之间的距离；

border-collapse：collapse，设置边框的合并；

注意：

如果表格中没有使用tbody而是直接使用tr，那么浏览器会自动创建一个tbody，并且将tr全部放到tbody而不是table的子元素里。因此下面这种写法是选择不到的：

table>tr:nth-child(odd){
    
}

设置单元格文字格式：

vertical-align：设置垂直方向布局；
text-align：设置水平方向布局；

子块元素在父块元素中水平垂直居中新思路：

父块设置：

display:table-cell;
vertical-align:middle;

子块设置：
```
margin: 0 auto;
```

4.5 表单

网页中的表单用于将本地的数据提交给远程服务器；

使用form标签来创建一个表单；

form的属性：

action：表单要提交的服务器的地址；

form标签内的表单标签：

文本框
```
<input type="text" name="xxx">
```
密码框
```
<input type="password" name="xxx">
```

单选框

选择框，必须要指定一个value属性
checked可以将单选按钮设置为默认选中；

<input type="radio" name="xxx" value="xxx">
<input type="radio" name="xxx" value="xxx">
<input type="radio" name="xxx" value="xxx" checked>
/* 同一组选择框的name必须相同 */

多选框

和单选框类似

<input type="checkbox" name="xxx" value="xxx">
<input type="checkbox" name="xxx" value="xxx">
<input type="checkbox" name="xxx" value="xxx" checked>
/* 同一组选择框的name必须相同 */

下拉列表

<select name="xxx">
	<option value="xxx"></option>
	<option value="xxx"></option>
	<option value="xxx" selected></option>
</select>

提交按钮
```
<input type="summit" value="xxx">
```
未完待续…

超高中级的咸鱼

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

2.css

一、样式格式：

1.1 内联样式

1.2 内部样式表

1.3 外部样式表

二、CSS语法

2.1 CSS基本语法：

2.2 常用选择器：

① 元素选择器

② id选择器

③ class选择器

④ 通配选择器

⑤ 复合选择器

交集选择器

并集选择器（组合选择器）

⑥ 关系选择器

子元素选择器

后代元素选择器

兄弟元素选择器

⑦ 属性选择器

⑧ 伪类选择器

子元素相关伪类：

否定伪类：

超链接伪类：

⑨ 伪元素选择器

⑩ 选择器器符号汇总

2.3 继承、选择器权重

2.3.1 继承

2.3.2 选择器权重

2.4 单位

① 像素px

② em

③ rem

④ 颜色单位

⑤ 百分比%

三、布局

3.1 文档流（normal flow）

3.2 盒子模型（box model）

① 内容区（content）

② 边框（border）

border-width：边框的宽度：

border-color：边框的颜色

border-style：边框的样式

③ 内边距（padding）

④ 外边距（margin）

⑤ 盒子的大小

box sizing属性：

⑥ 轮廓阴影和圆角

3.3 水平方向布局

3.4 垂直方向布局

① 子元素溢出

② 外边距重叠

3.5 行内元素的盒子模型

3.6 浮动

① float属性

② 浮动的特点：

③ clear属性

3.7 高度塌陷、BFC

高度塌陷的问题:

解决方案：

1、BFC(Block Formatting Context)块级格式化环境

2、after伪类（比较完美的方案）

3.8 定位（position）属性

① relative相对定位

② absolute绝对定位

③ fixed固定定位

④ sticky粘滞定位

⑤ 开绝对定位后的布局

⑥ 元素的层级

四 细节深入

4.1 字体

① 字体相关样式

② 图标字体iconfont

Font Awesome使用步骤

阿里矢量图标库

4.2 文本

① 文本的水平和垂直对齐

② 其他文本样式

③ 练习：京东顶部导航条

4.3 背景

四细节深入