前端学习笔记之CSS3基础语法与盒模型（二）

最新推荐文章于 2022-09-26 12:53:43 发布

FrebEaton

最新推荐文章于 2022-09-26 12:53:43 发布

阅读量363

点赞数

分类专栏：前端学习笔记文章标签： javascript css html5

本文链接：https://blog.csdn.net/frebeaton/article/details/118266764

版权

前端学习笔记专栏收录该内容

14 篇文章 2 订阅

订阅专栏

前端学习笔记之 CSS3基础语法与盒模型

CSS3简介

CSS（cascading style sheet，层叠式样式表）是用来给HTML标签添加样式的语言
CSS3是CSS的最新版本，增加了大量的样式、动画、3D特效和移动端特性等
CSS使样式和结构分离，样式和结构不用“杂糅着写”，而是彼此分开：HTML就负责结构，CSS负责样式

	语言	功能
结构层	HTML	搭建结构、放置部件、描述语义
样式层	CSS	美化页面、实现布局
行为层	JavaScript	实现交互效果、数据收发、表单验证等

CSS的本质

CSS就是样式的“清单”，要书写合适的选择器，然后把指定元素的样式“一条一条罗列”出来
CSS没有加减乘除、与或非、循环、选择、判断，CSS不是“编程”，就是简单直接的罗列样式
背诵CSS属性是非常重要的，属性背诵熟练程度决定了做网页的速度

.spec {
    color: green;
    font-weight: bold;
    font-style: italic;
}
.warn {
    font-size: 20px;
    background-color: orange;
}

CSS的书写位置

内嵌式

在学习CSS时，最常使用内嵌式，顾名思义，内嵌在.html文件中
在<head></head>标签对中，书写<style></style>标签对，里面书写CSS语句

<sytle>
	h1 {
    color: green;
    font-weight: bold;
    font-style: italic;
}
	p {
        font-size: 20px;
        background-color: orange;
	}
</sytle>

外链式

可以将CSS单独存为.css文件，然后使用<link>标签引入它
外链式的优点：多个html网页，可以共用一个css样式表文件
```
<link rel="stylesheet" href="css/css.css">
```

导入式

导入式是最不常用的样式表导入方法
使用导入式引入的样式表，不会等待css文件加载完毕，而是会立即渲染HTML结构，所以页面会有几秒中的“素面朝天”的时间

<style>
    @import url(css/css.css);
</style>

行内式

样式可以直接通过style属性写在标签身上
行内式牺牲了样式表的批量设置样式的能力，只能给一个标签设置样式，所以不常用

<h2 style="color: red;">我是一个二级标题</h2>

后台工程师经常使用行内式

CSS基本语法


/*最后一条样式可以不书写分号*/
.spec {
    color: green;
    font-weight: bold;
    font-style: italic
}
.warn {
    font-size: 20px;
    background-color: orange
}
/*可以没有换行*/
h1 {color: green; font-weight: bold; font-style: italic}
p {font-size: 20px;background-color: orange}

CSS3选择器

传统CSS2.1选择器
- 标签选择器和id选择器
- class选择器
- 复合选择器
- 伪类
CSS新增选择器
- 元素关系选择器
- 序号选择器
- 属性选择器
- CSS3新增伪类
- 伪元素
层叠性和选择器权重计算

传统选择器

标签选择器

标签选择器也称元素选择器、类型选择器，它直接使用元素的标签名当做选择器，将选择页面上所有该种标签。
标签选择器将选择页面上所有该种标签，无论这个标签所处位置的深浅。
标签选择器“覆盖面”非常大，所以通常用于标签的初始化

/*标签选择器将选择全部的对应标签，无论这个标签的深浅*/
span{
	color:red;
}
b{
	color:green;
}

ul {
    /* 去掉无序列表的小圆点 */
	list-style: none;
}
a {
    /* 去掉超级链接的下划线 */
	text-decoration: none;
}

id选择器

标签可以有id属性，是这个标签的唯一标识
id的名称只能由字母、数字、下划线、短横构成，且不能以数字开头，字母区分大小写，但习惯上一般为小写字母
同一个页面上不能有相同id的标签
CSS选择器可以使用井号#前缀，选择指定id的标签

<p id="para1">我是一个段落</p>
<p id="para3">我是一个段落</p>


#para1 {
	color: red;
}

#para3 {
    color: rgb(75, 84, 216);
}

class选择器

class属性表示 “类名”
类名的命名规范和id的命名规范相同

.warning {
	color: red;
}
<p class="warning">我是一个段落</p>

使用点.前缀选择指定class的标签
多个标签可以使用同一个类名

<p class="warning">我是段落</p>
<p class="warning">我是段落</p>
<ul>
    <li>我是列表项</li>
    <li class="warning">我是列表项</li>
    <li>我是列表项</li>
    <li class="warning">我是列表项</li>
</ul>

同一个标签可以同时属于多个类，类名用空格隔开

<p class="warning spec">我是段落</p>
.warning {
	color: red;
}
.spec {
    /* 文字倾斜 */
    font-style: italic;
}

原子类

在做网页项目前，可以将所有的常用字号、文字颜色、行高、外边距、内边距等都设置为单独的类
HTML标签就可以“按需选择”它的类名了，这样可以非常快速的添加一些常见样式

<p class="fs18 color-green">我是一个文字</p>
.fs12 {
	font-size: 12px;
}
.fs14 {
	font-size: 14px;
}
.fs16 {
	font-size: 16px;
}
.color-red {
	color: red;
}
.color-blue {
	color: blue;
}
.color-green {
	color: green;
}

复合选择器

选择器名称	示例	示例的意义
后代选择器	`.box .spec`	选择类名为box的标签内部的类名为spec的标签
交集选择器	`li.spec`	选择既是li标签，也属于spec类的标签
并集选择器	`ul,ol`	选择所有ul和ol标签

后代选择器：CSS选择器中，使用空格表示 “后代”
“后代”不仅包括 ”儿子“，还包括 “孙子” ，“曾孙子” 等。

后代选择器可以有很多空格，隔开好几代

.box ul li .spec em {
	color: red;
}
<div class="box">
    <ul>
        <li>
            <p class="spec">我是段落<em>强调文字</em></p>
        </li>
    </ul>
</div>

交集选择器：选择有.spec类的h3标签，此时应该使用交集选择器

并集选择器：并集选择器也叫作分组选择器，逗号表示分组
选择器可以任何搭配、结合，从而形成复合选择器，我们必须要能一目了然的看出选择器代表的含义

/*同时选择ul标签和ol标签*/
ul, ol {
	list-style: none;
}

div.box li p.spec em {
	color: red;
}

<div class="box">
    <ul>
        <li>
        	<p>我是段落</p>
        </li>
        <li>
        	<p class="spec">我是段落<em>强调文字</em></p>
        </li>
    </ul>
</div>

伪类

伪类是添加到选择器的描述性词语，指定要选择的元素的特殊状态，超级链接拥有4个特殊状态

伪类	意义
`a:link`	没有被访问的超级链接
`a:visited`	已经被访问过的超级链接
`a:hover`	正被鼠标悬停的超级链接
`a:active`	正被激活的超级链接（按下按键但是还没有松开按键）

爱恨准则：a标签的伪类书写，要按照“爱恨准则”的顺序，否则会有伪类不生效

<style>
    a:link {
        color: dodgerblue;
    }

    a:visited {
        color: darkgoldenrod;
    }

    a:hover {
        /* 背景颜色 */
        background-color: gold;
    }

    a:active {
        font-size: 50px;
    }
</style>

<p>
   <a href="http://www.imooc.com">前往慕课网</a>
</p>
<p>
   <a href="http://www.jd.com">前往京东商城</a>
</p>

CSS3新增选择器

元素关系选择器

名称	举例	意义
子选择器	div>p	div的子标签p
相邻兄弟选择器	img+p	图片后面紧跟着的段落将被选中
通用兄弟选择器	p~span	p元素之后的所有同层级span元素

子选择器

当使用 > 符号分隔两个元素时，它只会匹配那些作为第一个元素的直接后代元素，即两个标签为父子关系
后代选择器不一定限制是子元素
子选择器从IE7开始兼容

相邻兄弟选择器

相邻兄弟选择器 (+) 介于两个选择器之间，当第二个元素紧跟在第一个元素之后，并两个元素都是属于同一个父元素的子元素，则第二个元素将被选中
说白了，a+b就是选择 “紧跟在a后面的一个b”
相邻兄弟选择器从IE7开始兼容

通用兄弟选择器

通用兄弟选择器( ~ )，a~b 选择a元素之后所有同层级b元素
相邻兄弟选择器从IE7开始兼容

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box>p {
            color: red;
        }

        img {
            width: 300px;
        }

        img+span {
            color: green;
        }

        h3~span {
            font-style: italic;
        }
    </style>
</head>

<body>
    <div class="box">
        <p>我是段落</p>
        <p>我是段落</p>
        <div>
            <p>我是段落</p>
            <p>我是段落</p>
        </div>
    </div>
    <p>我是段落</p>
    <p>我是段落</p>

    <p>
        <img src="images/0.jpg" alt="">
        <span>这是北京故宫</span>
    </p>
    <p>
        <img src="images/1.jpg" alt="">
        <span>这是北京鸟巢</span>
    </p>

    <span>你好</span>
    <span>你好</span>

    <h3>我是一个三级标题</h3>
    <span>我是后面的span</span>
    <span>我是后面的span</span>
    <span>我是后面的span</span>
    <span>我是后面的span</span>
    <p>我是一个段落</p>
    <span>我是后面的span</span>
    <span>我是后面的span</span>
    <div>
        <span>多了一个级别span</span>
        <span>多了一个级别span</span>
    </div>
</body>

</html>

序号选择器

举例	意义
:first-child	第一个子元素
:last-child	最后一个子元素
:nth-child(3)	第3个子元素
:nth-of-type(3)	第3个某类型子元素
:nth-last-child(3)	倒数第3个子元素
:nth-last-of-type(3)	倒数第3个某类型子元素

:first-child

:first-child表示 “选择第一个子元素”，比如下面的例子就表示选择.box1盒子中第一个p

:last-child

:last-child表示“选择最后一个子元素”，比如下面的例子就表示选择.box1盒子中最后一个p

:nth-child()

:nth-child()可以选择任意序号的子元素
:nth-child()可以写成an + b的形式，表示从b开始每a个选一个，注意不能写为b + an

2n+1等价于odd，表示奇数; 2n等价于even，表示偶数

.box2 p:nth-child(2n + 1) {
	color: green;
}
.box2 p:nth-child(odd) {
	color: green;
}
.box2 p:nth-child(2n) {
	color: green;
}
.box2 p:nth-child(even) {
	color: green;
}

:nth-of-type()

:nth-of-type()将选择同种标签指定序号的子元素
请问下面的选择器，会让哪个p文字变蓝？
因为<p>我是3号这个并不是第3个标签而是第5个，因此不会被选中。

:nth-last-child() 和 :nth-last-of-type()

:nth-last-child()和:nth-last-of-type()都是倒数选择

选择器	兼容性
:first-child	IE7
:last-child	IE9
:nth-child(3)	IE9
:nth-of-type(3)	IE9
:nth-last-child(3)	IE9
:nth-last-of-type(3)	IE9

属性选择器

举例	意义
img[alt]	选择有alt属性的img标签
img[alt=“故宫”]	选择alt属性是故宫的img标签
img[alt^=“北京”]	选择alt属性以北京开头的img标签
img[alt$=“夜景”]	选择alt属性以夜景结尾的img标签
img[alt*=“美”]	选择有alt属性中含有美字的img标签
img[alt~=“手机拍摄”]	选择有alt属性中有空格隔开的手机拍摄字样的img标签
img[alt\|=“参赛作品”]	选择有alt属性以“参赛作用-”开头的img标签

CSS3新增伪类

伪类	意义
:empty	选择空标签
:focus	选择当前获得焦点的表单元素
:enabled	选择当前有效的表单元素
:disabled	选择当前无效的表单元素
:checked	选择当前已经勾选的单选按钮或者复选框
:root	选择根元素，即`<html>`标签

<style>
        .para {
            /* 宽度、高度 */
            width: 100px;
            height: 100px;
            /* 边框 */
            border: 1px solid #000;
        }

        .para:empty {
            background-color: red;
        }

        input:focus {
            background-color: rgb(239, 243, 181);
        }

        input:disabled {
            border: 1px solid #000;
        }

        input:enabled {
            border: 1px solid rgb(17, 84, 209);
        }

        input:checked+span {
            color: red;
        }

        :root {
            font-size: 20px;
        }
    </style>
</head>

<body>
    <p class="para"></p>
    <p class="para"></p>
    <p class="para">123</p>
    <p class="para"> </p>

    <p>
        <input type="text">
        <input type="text">
        <input type="text" disabled>
        <input type="text" disabled>
        <input type="text">
    </p>

    <p>
        <input type="checkbox"> <span>文字</span>
        <input type="checkbox"> <span>文字</span>
        <input type="checkbox"> <span>文字</span>
        <input type="checkbox"> <span>文字</span>
    </p>
</body>

伪元素

CSS3新增了“伪元素”特性，顾名思义，表示虚拟动态创建的元素
伪元素用双冒号表示，IE8可以兼容单冒号

::before和::after

::before 创建一个伪元素，其将成为匹配选中的元素的第一个子元素，必须设置 content 属性表示其中的内容

::after 创建一个伪元素，其将成为匹配选中的元素的最后一个子元素，必须设置 content 属性表示其中的内容

/*在a标签的内部会在开头增添一个*结尾增添一个$*/
a::before{
    content:"*";
}
a::after{
    conteng:"$";
}

::selection

::selection CSS伪元素应用于文档中被用户高亮的部分（使用鼠标圈选的部分）

/*设置文档中被用户鼠标选中的部分样式*/
.box::selection{
    background-color:springgreen;
    color:deeppink;
}

::first-letter和::first-line

::first-letter会选中某元素中（必须是块级元素）第一行的第一个字母
::first-line会选中某元素中（必须是块级元素）第一行全部文字

.box::first-letter{
    font-size:50px;
}
.box::first-line{
    text-decoration:underline;
}

层叠性和选择器权重计算

层叠性

CSS全名叫做“层叠式样式表”，层叠性是它很重要的性质
层叠性：多个选择器可以同时作用于同一个标签，效果叠加

层叠性的冲突处理

如果多个选择器定义的属性有冲突呢？CSS有严密的处理冲突的规则
权值相同就近原则，权值不同，权值高的优先

复杂选择器权重计算

复杂选择器可以通过（id的个数, class的个数, 标签的个数）的形式，计算权重

!important提升权重

如果我们需要将某个选择器的某条属性提升权重，可以在属性后面写!important
很多公司不允许使用!important，因为这会带来不经意的样式冲突

.spec{
    color: blue !important;
}

文本和字体属性

常用文本样式属性

color属性

color 属性可设置文本内容的前景色
color 属性主要可以用英语单词、十六进制、rgb()、rgba()等表示法
英语单词表示法，比如仅仅用于学习时临时设
置一下颜色，工作时基本不用这样的形式，因为追求精确

color属性 - 十六进制表示法

十六进制表示法是所有设计软件中都通用的颜色表示法，设计师给我们的设计图上面标注的颜色，通常为十六进制表示 color: #ff0000;
比如十六进制ff就是十进制的255，每种颜色分量都是0~255的数字
如果颜色值是#aabbcc的形式，可以简写为#abc
黑色是#000，白色是#fff，常见的灰色有#ccc、#333、
#2f2f2f等

color属性 - rgb()表示法

颜色也可以用rgb()表示法：红绿蓝
- color: rgb(255, 0, 0);

color属性 - rgba()表示法

颜色也可以用rgba()表示法，最后一个参数表示透明度，介于0到1之间，0表示纯透明，1表示纯实心
- color: rgba(255, 0, 0, .65);
rgba()表示法从IE9开始兼容

font-size属性

font-size属性用来设置字号，单位通常为px。今后课程上老师还会介绍em、rem单位。
- font-size: 30px;
网页文字正文字号通常是16px，浏览器最小支持10px字号

font-weight属性

font-weight属性设置字体的粗细程度，通常就用normal和bold两个值

font-style属性

font-style属性设置字体的倾斜

text-decoration属性

text-decoration属性用于设置文本的修饰线外观的（下划线、删除线）

<style>
        .para1 {
            color: blue;
        }

        .para2 {
            color: #ff3366;
        }

        .para3 {
            color: #f36;
        }

        .para4 {
            color: #000;
        }

        .para5 {
            background-color: #f36;
            color: #fff;
        }

        .para6 {
            color: rgb(255, 0, 0);
        }

        .para7 {
            color: rgba(255, 0, 0, .6);
        }

        /* 加粗 */
        .para8 {
            font-weight: bold;
        }

        .para9 {
            font-weight: 700;
        }

        h3 {
            font-weight: normal;
        }

        /* 倾斜 */
        .para10 {
            font-style: italic;
        }

        i {
            font-style: normal;
        }

        /* 下划线、删除线 */
        .para11 {
            text-decoration: underline;
        }

        a {
            text-decoration: none;
        }

        .para12 {
            text-decoration: line-through;
        }
    </style>

<body>
    <p class="para1">只争朝夕，不负韶华</p>
    <p class="para2">只争朝夕，不负韶华</p>
    <p class="para3">只争朝夕，不负韶华</p>
    <p class="para4">只争朝夕，不负韶华</p>
    <p class="para5">只争朝夕，不负韶华</p>
    <p class="para6">只争朝夕，不负韶华</p>
    <p class="para7">只争朝夕，不负韶华</p>
    <p class="para8">只争朝夕，不负韶华</p>
    <p class="para9">只争朝夕，不负韶华</p>
    <h3>只争朝夕，不负韶华</h3>
    <p class="para10">只争朝夕，不负韶华</p>
    <i>只争朝夕，不负韶华</i>
    <p class="para11">只争朝夕，不负韶华</p>
    <a href="">只争朝夕，不负韶华</a>
    <p class="para12">只争朝夕，不负韶华</p>
</body>

字体属性

font-family属性

font-family属性用于设置字体
- font-family: “微软雅黑”;
字体可以是列表形式，一般英语字体放到前面，后面的字体是前面的字体的“后备”字体
- font-family: serif, “Times New Roman”, “微软雅黑”;
- 字体名称中有空格，必须用引号包裹
中文字体也可以称呼它们的英语名字

字体通常必须是用户计算机中已经安装好的字体，所以一般来说设置为微软雅黑和宋体较多，设置成其他字体较少
如何设置为用户电脑中没有的字体呢？那就必须自己定义新字体，这就需要我们有字体文件，用户加载网页的时候，会同时下载这些字体文件

font合写属性

font属性可以用来作为font-style, font-weight,font-size, line-height和font-family属性的合写

定义字体

字体文件根据操作系统和浏览器不同，有eot、woff2、woff、ttf、svg文件格式，需要同时有这5种文件
当我们拥有字体文件之后，就可以用@font-face定义字体

@font-face {
    font-family: '字体名称';
    font-display: swap;
    src: url('eot字体文件地址');
    src: url('eot字体文件地址') format('embedded-opentype'),
        url('woff2字体文件地址') format('woff2'),
        url('woff字体文件地址') format('woff'),
        url('ttf字体文件地址') format('truetype'),
        url('svg字体文件地址') format('svg');
}

阿里巴巴提供了一套免费商用授权的普惠字体，网址网址在此
使用阿里巴巴普惠字体也省去了下载字体的麻烦

<style>
        @font-face {
            font-family: 'webfont';
            font-display: swap;
            src: url('fonts/webfont.eot');
            /* IE9*/
            src: url('fonts/webfont.eot') format('embedded-opentype'),
                /* IE6-IE8 */
                url('fonts/webfont.woff2') format('woff2'),
                url('fonts/webfont.woff') format('woff'),
                /* chrome、firefox */
                url('fonts/webfont.ttf') format('truetype'),
                /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
                url('fonts/webfont.svg') format('svg');
            /* iOS 4.1- */
        }

        .para1 {
            font-family: '宋体';
        }

        .para2 {
            font-family: '微软雅黑';
        }

        .para3 {
            font-family: 'SimSun';
        }

        .para4 {
            font-family: 'Microsoft Yahei';
        }

        .para5 {
            font-family: 'Times New Roman', serif, 'Microsoft Yahei';
        }

        h3 {
            font-family: 'webfont';
            color: rgb(250, 50, 190);
        }
    </style>
</head>

<body>
    <p class="para1">imooc慕课网</p>
    <p class="para2">imooc慕课网</p>
    <p class="para3">imooc慕课网</p>
    <p class="para4">imooc慕课网</p>
    <p class="para5">imooc慕课网</p>
    <h3>电商</h3>
    <h3>购物</h3>
    <h3>优惠</h3>
</body>

段落和行

text-indent属性

text-indent属性定义首行文本内容之前的缩进量，缩进两个字符应该写作
- text-indent: 2em;
- em表示字符宽度

line-height

line-height属性用于定义行高，我们先来认识什么是行高

line-heigh属性的单位可以是以px为单位的数值
- line-height: 30px;
line-heigh属性也可以是没有单位的数值，表示字号的倍数，这是最推荐的写法
- line-height: 1.5;
line-heigh属性也可以是百分数，表示字号的倍数
- line-height: 150%;

单行文本垂直居中

设置行高=盒子高度，即可实现单行文本垂直居中
设置text-align: center，即可实现文本水平居中

继承性

文本相关的属性普遍具有继承性，只需要给祖先标签设置，即可在后代所有标签中生效
- color
- font- 开头的
- list- 开头的text- 开头的
- line- 开头的
因为文字相关属性有继承性，所以通常会设置body标签的字号、颜色、行高等，这样就能当做整个网页的默认样式了

就近原则

直接选中的比继承的权重要高

在继承的情况下[即没有直接选中目标元素]，选择器权重计算失效，而是“就近原则”，

盒模型

认识盒模型

什么是盒模型

所有HTML标签都可以看成矩形盒子，由width、height、padding、border构成，称为“盒模型”

盒子的总宽度 = width + 左右padding + 左右border
盒子的总高度 = height + 上下padding + 上下border
width、height不是盒子总宽高

width属性

width属性表示盒子内容的宽度
width属性的单位通常是px，移动端开发也会涉及百分数、rem等单位
当块级元素（div、h系列、li等）没有设置width属性时，它将自动撑满，但这并不意味着width可以继承

height属性

height属性表示盒子内容的高度
height属性的单位通常是px，移动端开发也会涉及百分数、rem等单位
盒子的height属性如果不设置，它将自动被其内容撑开，如果没有内容，则height默认是0

    <style>
        .box1 {
            /* 宽度省略掉，由于div是块级元素，能够自动撑满 */
            height: 100px;
            background-color: red;
        }
        .box2 {
            /* 高度省略掉，能够被内容自动撑起来 */
            width: 200px;
            background-color: blue;
            color: white;
        }
    </style>
</head>

<body>
    <div class="box1"></div>

    <div class="box2">文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div>
</body>

padding属性

padding是盒子的内边距

padding是盒子的内边距，即盒子边框内壁到文字的距离。

padding是四个方向的，可以分别用小属性进行设置。

小属性	意义
padding-top	上padding
padding-right	右padding
padding-bottom	下padding
padding-left	左padding

padding属性如果用四个数值以空格隔开进行设置，分别表示上、右、下、左的padding
padding属性如果用三个数值以空格隔开进行设置，分别表示上、左右、下的padding
padding属性如果用二个数值以空格隔开进行设置，分别表示上下、左右的padding
当某一侧的padding属性为0时，可以直接写0不需要写单位

margin属性

margin是盒子的外边距

margin是盒子的外边距，即盒子和其他盒子之间的距离

margin也有四个方向

小属性	意义
margin-top	上margin，“向上踹”
margin-right	右margin，“向右踹”
margin-bottom	下margin，“向下踹”
margin-left	左margin，“向左踹”

margin的塌陷
- 竖直方向的margin有塌陷现象：小的margin会塌陷到大的margin中，从而margin不叠加，只以大值为准
一些元素（比如body、ul、p等）都有默认的margin，在开始制作网页的时候，要将他们清除
- *{margin:0; padding:0;}
- body,ul,p{margin:0;padding:0;} 通配符有效率问题应该使用并集选择器

盒子的水平居中

将盒子左右两边的margin都设置为auto，盒子将水平居中
- .box{margin:0 auto;}
文本居中是text-align: center; 和盒子水平居中是两个概念
盒子的垂直居中，需要使用绝对定位技术实现

 <style>
        body,
        ul,
        p {
            margin: 0;
            padding: 0;
        }

        span {
            border: 1px solid #000;
        }

        .span1 {
            margin-right: 30px;
        }

        .span2 {
            margin-left: 40px;
        }

        .box1 {
            width: 200px;
            height: 200px;
            background-color: orange;
            margin-bottom: 70px;
        }

        .box2 {
            width: 200px;
            height: 200px;
            background-color: blue;
            margin-top: 80px;
        }

        section {
            width: 600px;
            height: 100px;
            background-color: rgb(240, 151, 151);
            /* 盒子水平居中 */
            margin: 0 auto;
            /* 文字居中 */
            text-align: center;
            /* 行高等于盒子高，让文字垂直居中 */
            line-height: 100px;
        }
    </style>
</head>

<body>
    <span class="span1">我是一个span</span><span class="span2">我是一个span</span>

    <div class="box1"></div>
    <div class="box2"></div>

    <ul>
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
    </ul>

    <p>段落</p>
    <p>段落</p>
    <p>段落</p>

    <section>
        行胜于言
    </section>
</body>

盒模型计算

<style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 400px;
            height: 300px;
            padding: 10px;
            border: 6px solid blue;
            margin: 40px auto;
        }

        .box .c1 {
            /* 老大实际占有的宽度是400px，实际占有的高度是200px，并且向下踹20px */
            /* 它只给老二留下了80px */
            width: 388px;
            height: 188px;
            border: 6px solid green;
            margin-bottom: 20px;
        }

        .box .c2 {
            /* 老二还剩下什么？剩下了400px宽度、80px高度总空间 */
            width: 388px;
            height: 48px;
            padding: 10px 0;
            border: 6px solid orange;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="c1">1</div>
        <div class="c2">2</div>
    </div>
</body>

box-sizing属性

将盒子添加了box-sizing: border-box; 之后，盒子的width、height数字就表示盒子实际占有的宽高（不含margin）了，即padding、border变为“内缩”的，不再“外扩”。

box-sizing属性大量应用于移动网页制作中，因为它结合百分比布局、弹性布局等非常好用，在PC页面开发中使用较少
box-sizing属性兼容到IE9

行内元素和块级元素

display属性类型	是否能并排显示	是否能设置宽高	当不设置width属性时	举例
块级元素	否	是	width自动撑满	p、dt、dd、div、section、header、h系列、li、ul等
行级元素	是	否	width自动收缩	a、span、em、b、u、i等

img和表单元素是特殊的行内块，它们既能够设置宽度高度，也能够并排显示

<style>
        .box1{
            width: 100px;
            height: 100px;
            background-color: orange;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: blue;
        }
        span{
            width: 100px;
            height: 100px;
            background-color: green;
        }
        img{
            width: 400px;
        }
        input{
            width: 200px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>

    <span>我是span1</span> 
    <span>我是span2</span>

    <div>
        <img src="https://img-blog.csdnimg.cn/20210625203229800.png" alt=""><img src="https://img-blog.csdnimg.cn/20210625203229800.png" alt="">
    </div>

    <div>
        <input type="text">
        <input type="text">
    </div>
</body>
</html>

行内元素和块级元素的相互转换

使用display:block;即可将元素转为块级元素
使用display:inline;即可将元素转为行内元素，将元素转为行内元素的应用不多见
使用display:inline-block;即可将元素转为行内块

<style>
        .djjr{
            /* 转为块级元素 */
            display: block;
            background-color: blue;
            width: 200px;
            height: 60px;
            color: white;
            text-align: center;
            line-height: 60px;
            text-decoration: none;
        }
        span {
            /* 转为行内块 */
            display: inline-block;
            background-color: purple;
            padding: 8px 20px;
            margin-top: 30px;
            color: white;
        }
    </style>
</head>
<body>
    <a href="" class="djjr">点击进入</a>

    <div>
        <span>我是span</span>
        <span>我是span</span>
        <span>我是span</span>
    </div>
    
</body>

元素的隐藏

使用display: none;可以将元素隐藏，元素将彻底放弃位置，如同没有写它的标签一样
使用visibility: hidden;可以也可以将元素隐藏，但是元素不放弃自己的位置

<style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: orange;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: red;
            /* 隐藏，彻底放弃了位置 */
            /* display: none; */

            /* 隐藏，不放弃位置 */
            visibility: hidden;
        }
        .box3{
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>

FrebEaton

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习笔记之CSS3基础语法与盒模型（二）

前端学习笔记之CSS3基础语法与盒模型CSS3简介CSS（cascading style sheet，层叠式样式表）是用来给HTML标签添加样式的语言CSS3是CSS的最新版本，增加了大量的样式、动画、3D特效和移动端特性等CSS使样式和结构分离，样式和结构不用“杂糅着写”，而是彼此分开：HTML就负责结构，CSS负责样式语言功能结构层HTML搭建结构、放置部件、描述语义样式层CSS美化页面、实现布局行为层JavaScript实现交互效果、数据收发
复制链接

扫一扫