200字范文 > 【CSS基础语法】CSS基础语法知识学习笔记汇总

【CSS基础语法】CSS基础语法知识学习笔记汇总

时间：2019-11-09 05:37:58

CSS基础语法

前言一、样式定义方式1.html2.css 二、选择器1.html2.css 三、颜色1.html2.css 四、文本1.html2.css 五、字体1.html2.css 六、背景1.html2.css 七、边框1.html2.css 八、元素展示格式1.html2.css 九、内边距与外边距1.html2.css 十、盒子模型1.html2.css 十一、位置1.html2.css 十二、浮动1.html2.css 十三、flex布局1.html2.css

前言

html类似于一个毛坯房骨架，css类似于给毛坯房进行装饰

代码文件整理：

static文件夹一般用来存放各种资源，比如图片、音频视频、css文件

index.html为骨架

css全称为层叠样式表，作用：修饰html标签

html与css：

在html标签中，最基础的就是div和span标签，其他绝大部分标签都是从这两个标签上扩展出来的，扩展的时候其实就是在div和span标签的基础上加了一些css样式

即有很多标签是在基础标签的基础之上加了一些css样式得到的，只不过这些样式很常用就把他们单独拿出来作为单独的标签使用

css与js：

同理：在css中有一些常用的固有属性，绝大部分属性都是用js实现出来，所以也把js中一些常用逻辑单独拿出来作为css的一些常用属性

html、css、js三者关系：

html最上层(表层)

css 较下层

js最深层(底层)

现在学的都是基础语法，基础语法一定要学，等以后写项目工程时其实都是用框架，就像在写程序是没有必要手写汇编一样

一、样式定义方式

1.html

<!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></head><body><img width="300" src="/Learn2-css基础/static/images/mountain.jpg" alt="山"><img src="/Learn2-css基础/static/images/mountain.jpg" alt="山" style="width: 300px;"><div>yxc</div><div style="width: 300px; height: 300px; background-color: lightblue;"></div></body></html>

<!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>img {width: 200px;height: 200px;border-radius: 50%;}</style><style type="text/css">p {width: 50px;height: 50px;background-color: lightgreen;}.blue-p {background-color: lightblue;}</style></head><body><style>.big {width: 70px;height: 70px;}</style><img class="big" src="/Learn2-css基础/static/images/logo.png" alt=""><img src="/Learn2-css基础/static/images/mountain.jpg" alt=""><p class="blue-p">1</p><p class="big">2</p><p class="blue-p big">3</p><p>4</p></body></html>

<!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><link rel="stylesheet" href="/Learn2-css基础/static/css/2.1.3style1.css" type="text/css"><link rel="stylesheet" href="/Learn2-css基础/static/css/2.1.3style2.css" type="text/css"></head><body><img class="big" src="/Learn2-css基础/static/images/logo.png" alt=""><img src="/Learn2-css基础/static/images/mountain.jpg" alt=""><p class="blue-p">1</p><p class="big">2</p><p class="blue-p big">3</p><p>4</p></body></html>

2.css

p {width: 50px;height: 50px;background-color: lightgreen;/* css文件注释方式，可以注释单行 *//*也可以注释多行，与c++中注释类似 */}.blue-p {background-color: lightblue;}.big {width: 70px;height: 70px;}

img {width: 200px;height: 200px;border-radius: 50%;}

二、选择器

1.html

<!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><link rel="stylesheet" href="/Learn2-css基础/static/css/2.2选择器style.css"></head><body><div>div 1</div><div>div 2</div><div>div 3</div><div>div 4</div><div id="mydiv">div 5</div><div class="red-tag big-tag">div 6</div><div class="big-tag">div 7</div><div class="effect">div 8</div><a href="/Learn2-css基础/html/about1.html">about1</a><a href="/Learn2-css基础/html/about2.html">about2</a><a href="/Learn2-css基础/html/about3.html">about3</a><a href="/Learn2-css基础/html/about4.html">about4</a><button href="/Learn2-css基础/html/about1.html">about1</button><button href="/Learn2-css基础/html/about2.html">about2</button><button href="/Learn2-css基础/html/about3.html">about3</button><button href="/Learn2-css基础/html/about4.html">about4</button><input type="text" name="" id=""><p>p 1</p><p>p 2</p><p>p 3</p><p>p 4</p><p id="myp">p 5</p><p class="red-tag">p 6</p><p>p 7</p><p>p 8</p><p>p 9</p><a href="#myp1">我的标签</a><p>p 10</p><p>p 11</p><p id="myp1">p 12</p><div class="real">div 1</div><div class="big">div 2</div><div class="big real">div 3</div><div></div><p>p 1</p><p id="myp2" class="big">p 2</p><p>p 3</p><p>p 4</p><ul><li>1<ul><li>1.1</li><li>1.2</li><li>1.3</li></ul></li><li>2</li><li>3</li></ul><input type="text" name=""><input type="number" name="" id=""><p>锄禾日当午，</p><p>汗滴禾下土。</p><p>谁知盘中餐，</p><p>粒粒皆辛苦。</p><h1>悯农</h1><h1>咏柳</h1><h1>枫桥夜泊</h1><h1>滕王阁序</h1></body></html>

2.css

/*1.标签(元素)选择器：*/div {width: 100px;height: 100px;background-color: lightblue;margin-bottom: 10px;}p {width: 50px;height: 50px;background-color: lightgreen;/* p标签自带外边距，div默认不带外边距 */}/*2.ID选择器：(1)每个标签都可以设置id属性名，一般同一个页面中给标签设置的id是不同的(2)形式：#+标签id的名字。（一般与id相关的都是用#号）*/#mydiv {background-color: lightcoral;}#myp {background-color: lightsalmon;}/*3.类选择器：(1)第一种和第二种不常用，最常用的是第三种类选择器，class非常灵活，一般做项目只用前四种就够了(2)每一个标签里都可以定义class属性，class里可以存若干个用空格隔开的类名(3)class与id的区别：id和class在逻辑上没有任何区别，所有的区别都是人为定义的①同一页面中的每个标签设置id名一般来讲是唯一的，但多个标签可以用同一个class②class里可以存若干个用空格隔开的类名：同一个标签同时可以具有多个class，但一般只能具有一个id(4)形式：.+类名（一般与类有关的都加.）.+类名表示类，#+id名表示id，什么都不加表示标签(5)class渲染时的顺序：与声明顺序无关，与css中class的定义顺序有关。按顺序表达最后一个*/.red-tag {background-color: red;}.big-tag {width: 120px;height: 120px;}/*4.伪类选择器又叫状态选择器(1)链接伪类选择器:hover：鼠标悬停时的样式:link：链接访问前的样式:visited：链接访问后的样式:active：鼠标点击后长按时的样式:focus：聚焦后的样式(2)位置伪类选择器：:nth-child(n)：选择是其父标签第n个子元素的所有元素。(3)目标伪类选择器：:target：当url指向该元素时生效。*/.effect:hover {transform: scale(1.2);/*鼠标方上去之后变大多少倍*/transition: 200ms;/*鼠标方上去之后实现渐变的效果，表示用多长时间渐变过去*/}#mydiv:hover {/*伪类型选择器可以加到任意选择器后面*/background-color: lightgreen;transition: 2000ms;}a:link {color: red;}a:visited {color: green;}a:hover {color: orange;}a:active {color: purple;}button:link {color: red;background-color: blue;/* color是字体颜色，background-color是背景颜色 */}button:visited {color: green;}button:hover {color: orange;background-color: aquamarine;}button:active {color: purple;background-color: chartreuse;}input:focus {/*focus聚焦，每个页面都有一个光标，就是按键盘的时候光标出现在什么地方，光标所在的元素被称为聚焦，聚焦常与输入框input常用悬停与聚焦的区别：聚焦需要鼠标或键盘点击，悬停不用*/background-color: lightblue;width: 100px;}input:hover {transform: scale(1.2);}p:nth-child(24) {/* nth-child()是一状态，即bool函数，依次判断每一个p是不是父节点body的第n个儿子，如果是就执行下面css样式注意父节点是body，下标从1开始不要理解为选择第n个p标签，即父节点body的第n个儿子(虽然是这样),要理解为是状态，是一个bool函数判断是不是满足这个条件*/background-color: lightslategray;}p:nth-child(2n+1) {/* an+b:an+b必须是正整数odd:表示奇数块even:表示偶数块 */background-color: blue;}p:target {transform: scale(1.2);color: orange;transition: 2s;}/*5.复合选择器有可能存在多个标签公用同一个状态，没有必要定义很多遍，使用复合选择器可以实现element1, element2：同时选择元素element1和元素element2。element.class：选则包含某类的element元素。element1 + element2：选择紧跟element1的element2元素。element1 element2：选择element1内的所有element2元素。element1 > element2：选择父标签是element1的所有element2元素。*/div,p {background-color: lightblue;}div:hover,p:hover {background-color: lightblue;}div.big {transform: scale(1.2);}div.big.real {/* .也可以串联，只有同时满足big和real才能执行以下三种等价*/transform: scale(1.2);}.big.real {/* 不加div也一样，与上面那个等价 */transform: scale(1.2);}#myp2.big.real {transform: scale(1.2)}div+p {background-color: lightgreen;/* +表示紧跟在谁的后面才会执行 */}p+p {background-color: brown;}#myp2+p {background-color: black;}li ul li {/* 表示如果一个li他的祖先节点是li的话就会触发这个样式，不一定是父节点*/color: red/* 如果某一个样式的字体颜色变了，那么他的字体颜色是可以继承给它的子节点的 *//* 基于双指针的贪心算法匹配的 */}li>ul>ul {/* 表示如果一个ul他的父节点是li的话就会触发这个样式*/color: red}/*6.通配符选择器*：选择所有标签[attribute]：选择具有某个属性的所有标签[attribute=value]：选择attribute值为value的所有标签*/* {/* *就是选择所有标签 */font-size: 24px;}input[id] {background-color: lightblue;}input:id {background-color: lightblue;/* 与上面等价 */}input[type=text] {/* 按照属性选择标签 */background-color: lightblue;}/* 7.伪元素选择器将特定内容当做一个元素，选择这些元素的选择器被称为伪元素选择器。::first-letter：选择第一个字母::first-line：选择第一行::selection：选择已被选中的内容::after：可以在元素后插入内容::before：可以在元素前插入内容*/p::first-letter {color: red;font-size: 110%;}p::selection {color: yellow;background-color: blueviolet;}h1::before {content: "《";color: red;}h1::after {content: "》";}/*样式渲染优先级：不必深究这些特殊情况，一般不会用到越具体越优先，执行越晚越优先*/

三、颜色

1.html

<!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><link rel="stylesheet" href="/Learn2-css基础/static/css/2.3颜色style.css" type="text/css"></head><body><p>1</p><p>2</p><p>3</p><p>4</p></body></html>

2.css

/* 1.预定义的颜色值black、white、red、green、blue、lightblue等。2.16进制表示法使用6位16进制数表示颜色，例如：#ADD8E6。其中第1-2位表示红色，第3-4位表示绿色，第5-6位表示蓝色。简写方式：#ABC，等价于#AABBCC。3.RGB表示法rgb(173, 216, 230)。其中第一个数表示红色，第二个数表示绿色，第三个数表示蓝色。4.RGBA表示法rgba(173, 216, 230, 0.5)。前三个数同上，第四个数表示透明度。取色方式网页里的颜色，可以在chrome的调试模式下获取其他颜色可以使用QQ的截图软件：直接按c键，可以复制rgb颜色值按住shift再按c键，可以复制16进制颜色值*/p {width: 50px;height: 50px;}p:nth-child(1) {background-color: lightblue;}p:nth-child(2) {background-color: #add8e6;color: #ABC/*#AABBCC的简写形式*/}p:nth-child(3) {background-color: rgb(173, 216, 230);}p:nth-child(4) {background-color: rgba(173, 216, 230, 0.5);}

四、文本

1.html

<!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><link rel="stylesheet" href="/Learn2-css基础/static/css/2.4文本style.css" type="text/css"></head><body><h4>悯农</h4><div class="mydiv"><p>锄禾日当午，</p><p>汗滴禾下土。</p><p>谁知盘中餐，</p><p>粒粒皆辛苦。</p></div><div style="font-size: 2em;">第一层<div style="font-size: 2em;">第二层<div style="font-size: 2em;">第三层</div></div></div><div style="font-size: 2rem;">第一层<div style="font-size: 2rem;">第二层<div style="font-size: 2rem;">第三层</div></div></div><div class="mydiv1"></div><div class="mydiv2"><p>锄禾日当午，</p><p>汗滴禾下土。</p><p>谁知盘中餐，</p><p>粒粒皆辛苦。</p></div><div class="mydiv3"><p>锄禾日当午，锄禾日当午，锄禾日当午，锄禾日当午，锄禾日当午，锄禾日当午，锄禾日当午，锄禾日当午，锄禾日当午，锄禾日当午，锄禾日当午，锄禾日当午，</p><p>汗滴禾下土。汗滴禾下土。汗滴禾下土。汗滴禾下土。汗滴禾下土。汗滴禾下土。汗滴禾下土。汗滴禾下土。汗滴禾下土。汗滴禾下土。汗滴禾下土。汗滴禾下土。</p><p>谁知盘中餐，</p><p>粒粒皆辛苦。</p></div><a href="/about.html">About</a></body></html>

2.css

h4 {text-align: center;/* text-align 相当于word中的对齐左右对齐：除了最后一行之外，左右都对齐文字对齐是可以继承的，子标签可以继承父标签的对齐方式*/}.mydiv {text-align: center;font-size: 20px;}/*网页中常用的长度单位：px：绝对值，屏幕上一个像素点的长度，第一层默认是16px以下都是相对值,用的比较多，%相对于父元素的百分比em相对于当前元素的字体大小,em永远都是相对值，所以只需要修改初始值，就可以让整个页面等比例放大缩小了rem相对于根元素的字体大小vw相对于视窗宽度的百分比，把浏览器窗口平均分成100份，1vw表示窗口宽度的百分之一vh相对于视窗高度的百分比，1vh表示窗口高度的百分之一，vw和vh可以实现与浏览器等比例缩放*/.mydiv {text-align: center;font-size: 200%;}.mydiv1 {width: 50vw;height: 50vw;background-color: lightblue;}.mydiv2 {text-align: center;line-height: 200px;/* line-height是行高，行高就是每一行的高度，可以认为是行与行之间的距离a*b：a是宽度，b是高度行高常应用于字体竖直居中，因为字在渲染会默认放到行的中间*/background-color: lightblue;height: 200px;letter-spacing: 1.5em;/* 字间距，字和字之间的距离，1.5表示字和字之间隔着1.5个字的距离*/}.mydiv3 {text-indent: 2em;/* 缩进常应用于段落，此时单位常用em */}.mydiv3>p:nth-child(1) {text-decoration: underline dotted;/* 文本修饰，有下划线等很多常应用于删掉链接中的下划线 */text-shadow: 3px 3px 2px grey;/* 实现阴影效果有四个参数：阴影效果x方向的偏移量,阴影效果y方向的偏移量,阴影模糊r半径,color颜色注意css中的x,y的正方向，x向右为正方向，y向下为正方向与数中相反r可以省略，不写就是不模糊可以同时加多个阴影效果,即一个字可以有任意多个阴影效果，css中所有并列的项都是用空格隔开的*/text-shadow: -5px -5px 2px gray, 5px -5px 2px red;}a {text-decoration: none;}

五、字体

1.html

<!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><link rel="stylesheet" href="/Learn2-css基础/static/css/2.5字体style.css" type="text/css"></head><body><h4>悯农</h4><div class="mydiv"><p>锄禾日当午，</p><p>汗滴禾下土。</p><p>谁知盘中餐，</p><p>粒粒皆辛苦。</p></div><pre>#includeusing namespace std;int main(){int a,b;cin >> a >> b;cout << a+b;return 0;}</pre></body></html>

2.css

h4 {text-align: center;}.mydiv {text-indent: 3em;}.mydiv>p:nth-child(1) {font-size: 1.5rem;/* 字体型号，默认是16px */font-style: italic;/* 字体样式是否斜体：italic是斜体，normal是正常*/font-weight: 1000;/* 字体粗细：可以填1~1000中的值，没有单位，数越大越粗，也可以填一些文字选项，bolder，lighter等等*/font-family: serif;/* 字体种类：选项都不用倍，用啥去MDN官网查就行，比如等宽字体，带衬线字体,宋体... *//* 字体也可以自己上传 */color: blue;/* color就是字体颜色 */}pre {font-family: monospace;}

六、背景

1.html

<!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><link rel="stylesheet" href="/static/css/2.6背景style.css" type="text/css"></head><body><div class="mydiv"></div><div class="mydiv1"></div><div></div><div></div><div></div><div></div><div></div><div class="mydiv2"></div><div></div><div></div><div></div><div></div><div></div></body></html>

2.css

/*背景是说某一个标签的底色是什么 */.mydiv {width: 200px;height: 200px;background-color: lightblue;/* 通过backgound-color给背景设置背景颜色 */background-image: url(/static/images/mountain.jpg);background-image: linear-gradient(rgba(0, 0, 255, 0.5));/* 引入一个图片作为背景，背景图片比背景颜色优先级高，即背景图片的图层一定在背景颜色图层的上面也可以由渐变色替换图片*/background-size: 50px 50px;background-size: 50% 50%;/*设置背景背景图片的大小，宽跟高度background-size 的cover选项可以让图占满div */background-repeat: no-repeat;/* 设置背景图片要不要重复背景图像可以沿着水平轴，垂直轴，两个轴重复，或者根本不重复。repeat-x只重复行repeat-y只重复列*/background-position: 50px 10px;/* 背景图片偏移量：x向右，y向下如果x,y有一维不写，这一维会默认居中background-position:50px 等价于background-position:50px center也可以写成rigth和left控制左右，top和bottom控制上下*/background-position: right bottom;}.mydiv1 {/* 一张图里可以加很多图片，不一定只加一张图片多个图片也可以覆盖有优先级，定义越靠前的，图片越靠上*/width: 200px;height: 200px;background-color: lightblue;background-image: url(/static/images/mountain.jpg), url(/static/images/logo.png);background-size: 100px 200px, 100px 200px;background-repeat: no-repeat;background-position: left top, 100px top;}div {height: 200px;}.mydiv2 {/* 一张图里可以加很多图片，不一定只加一张图片多个图片也可以覆盖有优先级，定义越靠前的，图片越靠上*/width: 200px;height: 200px;background-color: lightblue;background-image: url(/static/images/mountain.jpg), url(/static/images/logo.png);background-size: 100px 200px, 100px 200px;background-repeat: no-repeat;background-position: left top, 100px top;background-attachment: fixed;/* scroll随着div一起滚 fixed位置固定，不随着div滚 */opacity: 0.2;/* 透明度：可以设置元素的透明度，不仅可以把背景变透明，也可以让图片变透明 */}

七、边框

1.html

<!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><link rel="stylesheet" href="/static/css/2.7边框style.css" type="text/css"></head><body style="margin: 0;"><img src="/static/images/mountain.jpg" alt=""><div></div><br><div></div><br><div></div><br><div></div><br><div></div><br></div><table><tbody><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr></tbody></table></body></html>

2.css

div {width: 100px;height: 100px;background-color: lightblue;border-style: solid dotted inset;/* 设置边框的样式：solid是实现，dotted是点 *//*注意css边界可以写四个方向：可以按照上右下左的顺序来写的如果只写一个默认是四个方向都是同一个格式，如果写两项就是上下和左右(其实上是按照上下左右的顺序来写，没写的那一项就取对边值) */border-width: 2px 4px 6px;/* 设置边框的粗细 */border-color: red green blue;/* 设置边框颜色 */border-radius: 5px 0 0 0;/*设置外边框的边角，很常用，5px表示边角半径的长度 */}img {width: 100px;height: 100px;border-radius: 50%;}td {border-style: solid;border-width: 3px;width: 20px;height: 20px;}table {border-style: solid;border-width: 3px;border-collapse: collapse;/* 把table元素的边框都重合到一块，separate 是分开*/}

八、元素展示格式

1.html

<!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><link rel="stylesheet" href="/static/css/2.8元素展现格式style.css" type="text/css"></head><body style="margin: 0;"><div>abc</div><div>abc</div><div>abc</div><br><span>第一个元素</span><span>第二个元素</span><img src="/static/images/mountain.jpg" alt=""><img src="/static/images/mountain.jpg" alt=""><img src="/static/images/mountain.jpg" alt=""><div class="mydiv">锄禾日当午，汗滴禾下土。谁知盘中餐，粒粒皆辛苦。</div><div class="mydiv1">#includeusing namespace std;int main(){int a,b;cin >> a >> b;cout << a + b ;return 0;} </div></body></html>

2.css

div {background-color: lightblue;width: 100px;height: 100px;margin: 10px;/* 外边距可以认为是距离周围其他元素的距离 */padding: 20px;/* 内边距可以认为是内部的元素距离边框的距离，可以改变整个元素的大小 */}span {background-color: lightblue;width: 500px;height: 200px;/* 发现上面的修改没有任何改变 */margin-top: 10px;padding-top: 10px;/* 发现上面的修改没有改变,水平方向的margin与padding有效，竖直方向的margin与padding无效*/margin-left: 10px;padding-left: 10px;}span {display: inline-block;/* 可以强制修改为别的类型标签,所以三类标签之间可以相互转化 */background-color: lightblue;width: 500px;height: 200px;margin-top: 10px;padding-top: 10px;margin-left: 10px;padding-left: 10px;}img {width: 50px;height: 100px;}.mydiv {width: 100px;height: 100px;background-color: lightblue;white-space: nowrap;/* white-space处理元素中的空白和换行：nowrap就是不换行 */overflow-x: hidden;overflow-y: scroll;/* 滚轮，hidden是隐藏，scroll是出现，如果什么都不写默认是auto，同时控制直接可以用overflow*/text-overflow: ellipsis;/* 长度如果超出行宽的话，就用三个点代替 */}.mydiv1 {width: 200px;height: 200px;background-color: lightblue;white-space: pre;/* 所以pre也是在div的基础上扩展出来的 */}

九、内边距与外边距

1.html

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=S, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="/static/css/2.9内边距与外边距.css" type="text/css"></head><body style="margin: 0;"><div class="div-outer"><div class="div-inner"></div><div class="div-inner-2"></div></div></body></html>

2.css

/* 1.外边距 margin：margin属性为给定元素设置所有四个（上下左右）方向的外边距属性。可以接受1~4个值（上、右、下、左的顺序）可以分别指明四个方向：margin-top、margin-right、margin-bottom、margin-leftcss边界可以写四个方向：可以按照上右下左的顺序来写的如果只写一个默认是四个方向都是同一个格式，如果写两项就是上下和左右(其实上是按照上下左右的顺序来写，没写的那一项就取对边值) 可取值：①length：固定值②percentage：相对于包含块的宽度，以百分比值为外边距。③auto：让浏览器自己选择一个合适的外边距。有时，在一些特殊情况下，该值可以使元素居中。auto可以实现水平居中，上下居中实现不了*/.div-outer {width: 300px;height: 300px;background-color: lightblue;margin: 50px;/* 外边距的两种边界问题 *//* 边界问题1：父元素与后代元素：当父元素没有上边框和padding时，后代元素的margin-top会溢出，溢出后父元素的margin-top会与后代元素取最大值。解决方法：子元素的margin-top连带影响父元素的上外边距解决方法① 父元素加一个边框：border: 1px solid;② 父元素加内边距：padding-top: 1px;③ 父元素加上overflow属性 overflow: hidden;④ 在父元素前面加一个空内容：.div-outer::before {content: “”;display: table;}*/}.div-outer::before {content: "";display: table;}.div-inner {width: 100px;height: 100px;background-color: red;margin: 20px auto;/* auto可以实现水平居中，上下居中实现不了 */margin-bottom: 20px;margin-left: 20px;}.div-inner-2 {width: 100px;height: 100px;background-color: darkgreen;margin-top: 30px;margin-left: 30px;/* 边界问题2：发现两个元素的外边距上下发生了重叠，此时取外边距的最大值。这种外边距重叠的情况只出现在上下，左右外边距是不会出现外边距重叠的情况的解决方法：为了不出现这种歧义的情况，尽可能只定义元素下外边距就可以了，最好不要上下边距同时定义，同理左右边距也是这样*/}/* 2.内边距：paddingpadding CSS 简写属性控制元素所有四条边的内边距区域。可以接受1~4个值（上、右、下、左的顺序）可以分别指明四个方向：padding-top、padding-right、padding-bottom、padding-left可取值：①length：固定值②percentage：相对于包含块的(即父级元素的)宽度，以百分比值为内边距。注意：元素的大小是和内边距相关的，即元素的宽度和高度都会加上内边距即 width=content+ padding +border*/.div-outer {padding-top: 20px;padding-left: 30px;padding: 20px 0 0 30px;}

十、盒子模型

1.html

<!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><link rel="stylesheet" href="/static/css/2.10盒子模型style.css" type="text/css"></head><body style="margin: 0;"><div class="div-outer"><div class="div-inner">123</div></div></body></html>

2.css

/* 一个元素有以下边界属性：content：内容区padding：内边距，内容区距离边框的距离border：边框margin：外边距，边框距离周围元素的距离元素是由：content+ padding +border 构成内容是由：content 构成*//* 盒子模型：box-sizingCSS 中的 box-sizing 属性定义了 user agent 应该如何计算一个元素的总宽度和总高度。增加content-box：是默认值，设置border和padding均会增加元素的宽高。border-box：设置border和padding不会改变元素的宽高，而是挤占内容区域。*/.div-outer {width: 300px;height: 400px;background-color: lightblue;padding: 20px 0 0 30px;}.div-outer::before {content: "";display: table;}.div-inner {width: 100px;height: 100px;background-color: darkred;color: white;box-sizing: border-box;padding: 20px 0 0 10%;border: 10px solid black;}

十一、位置

1.html

<!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><link rel="stylesheet" href="/static/css/2.11位置style.css" type="text/css"></head><body style="margin: 0;"><div class="div-outer"><div class="div-inner-1">1</div><div class="div-inner-2">2</div><div class="div-inner-3">3</div><div class="div-inner-4">回到顶部</div></div></body></html>

2.css

/* position:指定一个元素在文档中的定位方式(右四种定位类型，五种取值)(1)static:默认定位，如果不设置的话，默认为static类型，即位置是从上往下一行一行正常摆该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。(2)relative:相对定位，相对于初始位置(static位置下)可以做上下左右四个方向的偏移(3)absolute:绝对定位，相对于上一个非static类型的块元素定位，固定在文档的某一个位置上，所以元素的位置在屏幕滚动时会随之改变(4)fixed:绝对定位，又叫固定定位(窗口定位)相对于上一个非static类型的块元素定位，固定在屏幕视窗上，跟文档是脱离的，所以元素的位置在屏幕滚动时不会改变(5)sticky:粘性定位，元素根据正常文档流进行定位，然后相对它的最近滚动祖先进行偏移，不偏移的话跟static是一样的*/.div-outer {width: 300px;height: 3000px;background-color: lightblue;padding: 20px 0 0 30px;}.div-outer::before {content: "";display: table;}.div-inner-1 {width: 100px;height: 100px;background-color: darkred;color: white;margin: 10px;display: inline-block;}.div-inner-2 {width: 100px;height: 100px;background-color: darkgreen;color: white;margin: 10px;display: inline-block;position: relative;top: 30px;left: -100px;}.div-inner-3 {width: 100px;height: 100px;background-color: yellow;color: white;margin: 10px;display: inline-block;position: absolute;top: 100px;left: 20px;}.div-inner-4 {width: 30px;height: 100px;background-color: lightcoral;color: white;margin: 10px;display: inline-block;position: fixed;top: 200px;right: 0;}

十二、浮动

1.html

<!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><link rel="stylesheet" href="/static/css/2.12浮动style.css" type="text/css"></head><body style="margin: 0;"><div class="div-outer"><div class="div-inner-1">1</div><div class="div-inner-2">2</div><div class="div-inner-3">3</div><div class="div-inner-4"></div></div></body></html>

2.css

/* 浮动：就是让某一块浮起来浮动的元素，不再占用空间，会脱离普通文档流层，且浮动元素的层级要高于普通元素(1)应用：如果想让不同的div放在同一行时，并且中间不想有空隙时，可以设置改变其与元素展现格式display:inline-block，但这种中间还是会有间距空隙可以直接设置float属性，float：left是左浮动，就是左对齐(2)注意：clear:清除浮动的影响left：清除左侧浮动。right：清除右侧浮动。both：清除左右两侧浮动理解：网页布局是分层的，分三层1.最底层：普通文档流不加float时，默认为普通文档流,即一个网页body普通文档流中是分块级和内联的。2.中间层：浮动层元素浮动，设置float以后会提升到浮动层所有浮动层的元素默认横向排列浮动层中不分块级和内联，都可以定义宽高，都是横向排列。3.最高层：定位层设置postiton后就在定位层了什么时候要清除浮动？1.子级浮动，父级一定要清除浮动2.有时，你可能想要强制元素移至任何浮动元素下方。比如说，你可能希望某个段落与浮动元素保持相邻的位置，但又希望这个段落从头开始强制独占一行。如何清除浮动？1.overflow:hidden2.clear:both*/.div-outer {width: 100%;height: 3000px;background-color: lightblue;}.div-outer::before {content: "";display: table;}.div-inner-1 {width: 100px;height: 100px;background-color: darkred;color: white;float: left;}.div-inner-2 {width: 100px;height: 100px;background-color: darkgreen;color: white;float: left;}.div-inner-3 {width: 100px;height: 100px;background-color: yellow;color: white;float: left;}.div-inner-4 {width: 300px;height: 300px;background-color: black;position: relative;z-index: 3;clear: both;}

十三、flex布局

1.html

<!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><link rel="stylesheet" href="/static/css/2.13flex布局style.css" type="text/css"></head><body><div class="div-flex"><div class="div-flex-item">1</div><div class="div-flex-item">2</div><div class="div-flex-item">3</div><div class="div-flex-item">4</div><div class="div-flex-item">5</div><div class="div-flex-item">6</div><div class="div-flex-item">7</div><div class="div-flex-item">8</div><div class="div-flex-item">9</div><div class="div-flex-item">10</div></div></body></html>

2.css

/* flex是弹性盒子作用：让我们更好的布局页面中的各个模块的,可以让我们更好的控制块的摆放方式优势：可以更方便的实现元素水平居中和竖直居中水平居中实现方式：(1)可以把margin设置左右方向设置设置成automargin-left:auto;margin-right:auto;(2)display:flex;justify-content: center;竖直居中实现方式：(1)position:relativetop:50%transform:translateY(-50%)(2)display:flex;align-items: center;*/.div-flex {width: 50%;height: 500px;background-color: lightgray;display: flex;/* 1.设置flex的方式，只需要在父元素上把display改成flex即可 *//* 2.设置flex的摆放顺序的：(1)flex-direction(2)flex-wrap(3)flex-flow*/flex-direction: row-reverse;/* row：按行摆，从左往右摆，不加默认也是rowrow-reverse：从右往左摆column：按列摆，从上往下摆column-reverse：从下往上摆把页面变窄，所有的模块会有一个压缩效果*/flex-wrap: wrap;/* wrap是包裹的意思，即换行，定 flex 元素单行显示还是多行显示默认值为nowrap*/flex-flow: row-reverse wrap;/* flex-flow 属性是 flex-direction 和 flex-wrap 的结合起来一起写。默认值为：row nowrap*//* 3.设置flex元素对齐方式的：flex布局有两个轴，行从左往右为弹性容器主轴(或者网格行轴) ，列从上往下为交叉轴(列轴)这个对齐是跟flex-direction是有关系的，会相互影响(1)justify-content：主轴对齐方式列轴上的对齐 (2)align-items：将所有行在交叉轴上对齐(3)align-content：与items类似，区别主要有两点*/justify-content: flex-end;/*flex-start 默认左对齐flex-end：右对齐center:每一行居中space-between：左右两段对齐，每一行左右两端对齐，中间均匀分布space-around：两端的距离等于中间的一般space-evenly：两端的距离跟中间一样，即把所有的空隙均匀分布*/align-items: flex-end;/*flex-start 默认上对齐，从上往下flex-end：下对齐center:每一行居中 stretch：弹性元素被在侧轴方向被拉伸到与容器相同的高度或宽度*/align-content: flex-end;/* 与aligin-items的区别：①多行时，行与行之间没有距离②单行时，会顶行，竖直不会居中*/}/* 之前是定义在flex的父元素上，现在定义在每个flex元素的内部*/.div-flex-item {width: 100px;height: 100px;}.div-flex-item:nth-child(odd) {background-color: lightpink;order: 1;/* 定义flex项目的顺序，值越小越靠前 */flex-flow: 3;/* 放大：设置 flex 项主尺寸的 flex 增长系数 */flex-shrink: 3;/* 缩小 */flex-basis: 10%;/* 设置flex元素的宽度，比初始宽度优先级大 */flex: auto;/* flex-grow、flow-shrink、flex-basis的缩写。 auto：flex: 1 1 autonone：flex: 0 0 auto*/}.div-flex-item:nth-child(even) {background-color: lightgreen;order: 2;flex-grow: 1;flex-shrink: 1;}

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。