CSS
CSS基础
01_CSS简介
<!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中的 style标签里
然后通过CSs的选择器来选中元素并为其设置各种样式
可以同时为多个标签设置样式,并且修改时只需要修改一处即可全部应用
- 内部样式表更加方便对样式进行复用
- 问题
我们的内部样式表只能对一个网页起作用
它里边的样式不能跨页面进行复用
-->
<!-- <style>
p{
color: salmon;
font-size: 50px;
}
</style> -->
<!--
第三种方式（外部样式表）—— 最佳使用
- 可以将CSS样式編写到一个外部的CSS文件中
然后通过link标签来引入外部的CSS文件
- 外部样式表需要通过link标签进行引入,
意味着只要想使用这些样式的网页都可以对其进行引用
使样式可以在不同页面之间进行复用
- 将样式编写到外部的CSS文件中,可以使用到浏览器的緩存机制，
从而加快网页的加载速度,提高用户的体验。
-->
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!--
网页分成三个结构：
结构（HTML）
表现（CSS）
行为（JavaScript）
CSS
- 层叠样式表
- 网页实际上是一个多层的结构,通过CSs可以分别为网页的每一个层来设置样式
而最终我们能看到只是网页的最上边一层
- 总之一句话,CSS用来设置网页中元素的样式
-->
<!--
使用CSS修改文字的样式
第一种方式：(内联样式,行内样式)——————不推荐使用
- 在标签内部通过style属性来设置元素的样式
- 问题：
使用内联样式，样式是能对一个标签生效，
如果希望影响到多个元素必须在每一个元素中都复制
并且当样式发生变化时,我们必须要一个一个的修改,非常的不方便
- 注意：
开发时绝对不要使用内联样式
-->
<!-- <p style="color: red; font-size: 60px;">少小离家老大回,乡音无改鬓毛衰</p>
<p>今天天气真不错</p> -->
<p>少小离家老大回,乡音无改鬓毛衰</p>
</body>
</html>
02_CSS语法
<!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>
/**
CSS中的注释,注释中的内容会自动被浏览器所忽略
CSS的基本语法:
选择器 声明块
选择器,通过选择器可以选中页面中的指定元素
比如 p 的作用就是选中页面中所有的p元素
声明块，通过声明块来指定要为元素设置的样式
声明块由一个一个的声明组成
声明量一个名值对结构
一个样式名对应洋式值,名和值之间以:连接,以;结尾
*/
p{
color: salmon;
font-size: 40px;
}
h1{
color: seagreen;
}
</style>
</head>
<body>
<!--
注释 ctrl+/
向下复制行Shift+Alt + ↓ / ↑
-->
<h1>我是</h1>
<p>今天天气真不错</p>
<p>今天天气真不错</p>
<p>今天天气真不错</p>
<p>今天天气真不错</p>
</body>
</html>
03_CSS常用选择器
<!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>
/*
将所有的段落设置为红色（字体）
元素选择器
作用：根据标签名来选中指定的元素
语法：标签名{}
例子：p{} h1{} div
*/
p{
color: violet;
}
h1{
color: yellowgreen;
}
/*
将儿童那行变为红色
id选择器
作用：根据元素的id属性值选中一个元素
语法：#id 属性值{}
例子：#box{} #red{}
*/
#red{
color: red;
}
/*
将秋水..和落霞...设置为蓝色
类选择器
作用：根据元素的c1ass 属性值选中一组元素
语法：.class属性值
*/
.blue{
color: royalblue;
}
/*
通配选择器
作用:选中页面中的所有元素
语法：*
*/
*{
color: skyblue;
}
</style>
</head>
<body>
<h1 class="blue abc">我是标题1</h1>
<p>少小离家老大回</p>
<p>乡音无改登毛衰</p>
<p id="red">儿童相见不相识</p>
<p>笑问客从何处来</p>
<!--
class 标签的属性,它和id类似,不同的是class 可以重复使用
可以通过c1ass 属性来为元素分组
-->
<p class="blue">秋水共长天一色</p>
<p class="blue">落霞与孤鹜齐飞</p>
</body>
</html>
04.复合选择器
<!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>
/* 将c1ass为red的元素设置为红色(字体)*/
.red{
color: red;
}
/* 将c1ass为red的div字体大小设置为30px */
/*
交集选择器
作用: 选中同时复合多个条件的元素
语法: 选择器1选择器2选择器3选择器n{}
注意点:
交集选择器中如果有元素选择器,必须使用元素选择器开头
*/
div.red{
font-size: 30px;
}
.a.b.c{
color: rgb(19, 212, 103);
}
/* div#box1{} 交集选择器 */
/*
选择器分组(并集选择器)
作用：同时选择多个选择器对应的元素
语法: 选择器1,选择器2,选择器3,选择器n{}
#b1，.p1, h1, span, div.red{}
*/
h1,span{
color: violet;
}
</style>
</head>
<body>
<div class="red">我是div</div>
<p class="red">我是p元素</p>
<div class="red2 a b c">我是div</div>
<h1>标题</h1>
<span>哈哈</span>
</body>
</html>
05.关系选择器
<!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>
/*
为div的子元素 span 设置一个字体颜色红色
(为 div 直接包含的 span 设置一个字体颜色)
子元素选择器
作用: 选中指定父元素的指定子元素
语法：父元素>子元素
*/
/* div.box>span{
color: violet;
} */
/*
后代元素选择器:
作用: 选中指定元素内的指定后代元素
语法: 祖先后代
*/
/* div span{
color: yellow;
} */
/*
选择下一个兄弟
语法: 前一个 + 下一个
选择下边所有的兄弟
语法：前一个 ~ 下一个
*/
p + span{
color: yellowgreen;
}
p ~ span{
color: rgb(84, 50, 205);
}
</style>
</head>
<body>
<!--
父元素
- 直接包含子元素的元素叫做父元素
子元系
- 直接被父元素包含的元素是子元素
祖先元素
- 直接或间接包含后代元素的元素叫做祖先元素
- 元素的父元素也是它的祖先元素
后代元素
- 直接或间接被祖先元素包含的元素叫做后代元素
- 子元素也是后代元素
兄弟元素
- 拥有相同父元素的元素是兄弟元素
-->
<div class="box">
我是一个div
<p>
我是div中的p元素
<span>我是p元素中的span</span>
</p>
<span>我是div中的span元素</span>
<span>我是div中的span元素</span>
<span>我是div中的span元素</span>
<span>我是div中的span元素</span>
<span>我是div中的span元素</span>
</div>
<span>我是div外的span元素</span>
</body>
</html>
06.属性选择器
<!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>
/*
p 为元素选择器 [属性选择器]
p[title] [属性名] 选择含有指定属性的元素
p[title=abc] [属性名=属性值] 选择含有指定属性和属性值的元素
p[title^=abc] [属性名^=属性值] 选择属性值以指定值开头的元素
p[title$=abc] [属性名$=属性值] 选择属性值以指定值结尾的元素
p[title*=abc] [属性名*=属性值] 选择属性值中含有某值的元素的元素
*/
/* p[title] */
/* p[title=abc] */
/* p[title^=abc] */
/* p[title$=abc] */
/* p[title*=abc] */
p[title*=abc]{
color: orange;
}
</style>
</head>
<body>
<p title="abc">少小离家老大回</p>
<p title="abcdef">乡音无改登毛衰</p>
<p title="hello">儿童相见不相识</p>
<p>笑问客从何处来</p>
<p>秋水共长天一色</p>
<p>落霞与孤鹜齐飞</p>
</body>
</html>
07.伪类选择器
<!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>
/*
将ul里的第一个1i设置为红色
*/
/* ul > li.first{
color: red;
} */
/*
伪类（不存在的类，特殊的类）
- 伪类用来描述一个元素的特殊状态
比如: 第一个子元素、被点击的元素、鼠标移入的元素……
- 伪类一般情况下都是使用: 开头
:first-child ————第一个子元素
:last-child ————最后一个子元素
:nth-child() ————选中第n个子元素
特殊值：
n 全选中 0到正无穷
2n 表示选中偶数位的
2n+1或odd 表示选中奇数位的
- 以上这些伪类都是根据所有的子元素进行排序
: first-of-type
: last-of-type
: nth-of-type
- 这几个伪类的功能和上述的类似,不同点是他们是在同类型元素中进行排序
- not() 否定伪类
将符合条件的元素从选择器中去除
:empty 元素为空
:only-child 元素只有一个
:only-of-type 元素只有一个
*/
/* ul>li:first-child{
color: salmon;
}
ul>li:last-child{
color: rgb(128, 201, 80);
} */
ul>li:nth-child(3){
color: rgb(67, 31, 196);
}
/* ul>li:nth-child(2n){
color: rgb(243, 28, 110);
}
ul>li:nth-child(2n+1){
color: rgb(31, 177, 196);
}
ul>li:first-of-type{
color: sienna;
}
ul > li:not(:nth-of-type(3)){
color: yellowgreen;
} */
</style>
</head>
<body>
<!--
ul——无序列表
li——列表项
ul>li+Tab键/enter————自动生成
ul+ul
<ul></ul>
<ul></ul>
-->
<ul>
<span>我是一个span</span>
<li>第0个</li>
<li class="first">第一个</li>
<li>第二个</li>
<li>第三个</li>
<li>第四个</li>
<li>第五个</li>
</ul>
</body>
</html>
08.a元素的伪类
<!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>
/*
:link 用来表示没访问过的链接(正常的链接)
*/
a.link{
color: yellow;
font-size: 30px;
}
/*
:visited 用来表示访问过的链接
由于隐私的问题，所以 visited 这个伪类只能修改链接的颜色
用的不太多
*/
a.visited{
color: violet;
}
/*
：hover 用来表示鼠标移入的状态
*/
a.hover{
color: turquoise;
font-size: 20px;
}
/*
:active 用来表示鼠标点击
*/
a.active{
color: teal;
}
</style>
</head>
<body>
<!--
1.没有访问过的链接
2.访问过的链接
设置颜色：用class类不可以
-->
<a href="http://www.baidu.com">访问过的链接</a>
<br><br>
<a href="http://www.baidu123.com">没有访问过的链接</a>
</body>
</html>
09.伪元素选择器
<!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>
p{
font-size: 20px;
}
/*
伪元素，表示页面中一些特殊的并不真实的存在的元素(特殊的位置)
伪元素使用 :: 开头
::first-letter 表示第一个字母
::first-line 表示第一行
::selection 表示选中的内容
::before 元素的开始
::after 元素的最后
- before和 after必须结合 content属性来使用
*/
p::first-letter{
font-size: 50px;
}
p::first-line{
background-color: thistle;
}
p::selection{
background-color: tomato;
}
/* div::before{
content: 'abc';
color: rgb(117, 117, 52);
}
div::after{
content: 'hahah';
color: teal;
} */
</style>
</head>
<body>
<q>hello</q>
<div>Hello Hello Hello Hello</div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque velit modi veniam nisi veritatis empore laborum nemo ipsa itaque optio. Id odit consequatur mollitia excepturi, minus saepe nostrum vel porro
</p>
</body>
</html>
10.样式的继承
<!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>
body{
font-size: 30px;
}
/*
样式的继承，我们为一个元素设置的样式同时也会应用到它的后代元素上
继承发生在祖先元素和后代元素中
继承的设计是为了方便我们开发，利用继承我们可以将一些通用的样式统一设置到共同的祖先元素
这样只需设置一次即可让所有元素都有该样式
注意: 并不是所有的样式都会被继承:
比如背景相关的, 布局相关等的这些样式都不会被继承
*/
p{
color: red;
}
div{
color: sandybrown;
}
</style>
</head>
<body>
<!-- p元素中不可以选块元素，可以选行内元素 -->
<p>
我是一个p元素
<br>
<span>我是p元素中的span</span>
</p>
<span>我是P元素外的span</span>
<div>
我是div
<span>
我是div中的span
<em>我是span中的em</em>
</span>
</div>
</body>
</html>
11.选择器的权重
<!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>
/*
样式的冲突:
- 当我们通过不同的选择器,选中相同的元素,并且为相同的样式设置不同的值旺,此时就发生了样式的冲突
发生样式冲突时,应用哪个样式由选择器的权重(优先级)决定
选择器的权重
内联样式 1,0,0,0
id 选择器 0,1,0,0 id
类和伪类选择器 0,0,1,0 class类
元素选择器 0,0,0,1 div
通配选择器 0,0,0,0
继承的样式 没有优先级
比较优先级时, 需要将所有的选择器的优先级进行相加计算, 最后优先级越高, 则越优先显示(分组选择器是单独计算的)
选择器的累加不会超过其最大的数量级，类选择器在高也不会超过id选择器
如果优先级计算后相同, 此时则优先使用靠下的样式
可以在某一个样式的后边添加 !important , 则此时该样式会获取到最高的优先级,甚至超过内联样式
注意: 注意:在开发中这个玩意一定要慎用 在开发中这个玩意一定要慎用
*/
/* #box1{
background-color: turquoise;
}
div#box1{
background-color: yellowgreen;
}
div{
background-color: red;
} */
.red{
background-color: yellow;
/* font-size: 30px; */
}
.d1{
background-color: purple !important;
}
/* div,p,span{
background-color: aqua;
} */
/* *{
font-size: 50px;
}
div{
font-size: 20px;
} */
</style>
</head>
<body>
<div id="box1" class="red d1 d2 d3 d4 ">
我是一个div
<span>我是div中的span</span>
</div>
</body>
</html>
12.单位
<!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>
/* html{
font-size: 30px;
} */
.box1{
/*
长度单位:
像素
- 屏幕(显示器)实际上是由一个一个的小点点构成的
- 不同屏幕的像素大小是不同的, 像素越小的屏幕显示的效果越清晰
- 所以同样的 200x 在不同的设备下显示效果不一样
h100+tab
百分比
- 也可以将属性值设置为相对于其父元素属性的百分比
- 设置百分比可以使子元素跟随父元素的改变而改变
em
- en是相对于元素的字体大小来计算的 一般是16
- 1em = 1font-size
- em会根据字体大小的改变而改变
rem
- rem是相对于根元素的字体大小来计算 16
*/
width: 200px;
height: 200px;
background-color: orange;
}
.box2{
width: 100px;
height: 100px;
background-color: orchid;
}
.box3{
font-size: 20px;
width: 10em;
height: 10em;
background-color: greenyellow;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<div class="box3"></div>
</body>
</html>
13.颜色
<!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>
.box{
width: 100px;
height: 100px;
/*
颜色单位
在CSs中可以直接使用颜色名来设置各种颜色
比如:red、 orange、 yellow、blue、 green... ...
但是在css中直接使用颜色名是非常的不方便
RGB值:
- RGB通过三种颜色的不同浓度来调配出不同的颜色
- R red, G green , B blue
- 每一种颜色的范围在8-255(0%-160%)之间
- 语法: RGB(红色,绿色,蓝色)
RGBA
- 透明
- 就是在rgb的基础上增加了一个a表示不透明度
- 需要四个值,前三个和rgb一样,第四个表示不透明度
1 表示完全不透明 0表示完全透明 5半透明
十六进制的RGB值：
- 语法:#红色绿色蓝色
- 颜色浓度通过 00-ff
- 如果颜色两位两位重复可以进行简写
#aabbcc --> #abc
HSL值 HSLA值
H 色相(0 - 360)
S 饱和度(0-100)%
L 亮度 0-100%
*/
background-color: red;
background-color: rgb(150, 189, 58);
background-color: rgba(106, 153, 85, 5);
background-color: #bfa;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
layout
01.文档流
<!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>
.box1{
background-color: yellow;
}
</style>
</head>
<body>
<!--
文档流( normal flow)
- 网页是一个多层的结构,一层摞着一层
- 通过CSS可以分别为每一层来设置样式
- 作为用户来讲只能看到最顶上一层
- 这些层中,最底下的一层称为文档流,文档流是网页的基础
我们所创建的元素默认都是在文档流中进行排列
- 对于我们来元素主要有两个状态
在文档流中
不在文档流中(脱离文档流)
- 元素在文档流中有什么特点
- 块元素
- 块元素会在页面中独占一行
- 默认宽度是父元素的全部(会把父元素撑满)
- 默认高度是被内容撑开(子元素)
- 行内元素
- 行内元素不会独占页面的一行,只占自身的大小
- 行内元素在页面中左向右水平排列,如果一行之中不能容纳下所有的行内元素
则元素会换到第二行继续自左向右排列(书写习惯一致)
- 内元素的默认宽度和高度都是被内容撑开
-->
<div class="box1">我是div1</div>
<div class="box2">我是div2</div>
<span>我是span1</span>
<span>我是span2</span>
<span>我是span2</span>
</body>
</html>
02.盒模型
<!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>
.box1{
/*
内容区( content),元素中的所有的子元素和文本内容都在内容区中排列
内容区的大小由 width和 height两个属性来设置
width 设置内容区的宽度
height设置内容区的高度
*/
width: 200px;
height: 200px;
background-color: #bfa;
/*
边框( border) 边框属于盒子边缘,边框里边属于盒子内部,出了边框都是盒子的外部
边框的大小会影响到整个盒子的大小
要设置边框,需要至少设置三个样式:
边框的宽度 border- width
边框的颜色 border- color
边框的样式 border- style
*/
border-width: 10px;
border-color: red;
border-style: solid;
}
</style>
</head>
<body>
<!--
盒模型、盒子模型、框模型( box mode1)
- CSS将页面中的所有元素都设置为了一个矩形的盒子
- 将元素设置为矩形的盒子后,对页面的布局就变成将不同的盒子摆放到不同的位置
- 每一个盒子都由一下几个部分组成:
内容区( content)
内边距( padding)
边框 ( border)
外边距( margin)
-->
<div class="box1">我是</div>
</body>
</html>
03.盒子模型-边框
<!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>
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
/*
边框
边框的宽度 border- width
边框的颜色 border- color
边框的样式 border- style
*/
/*
border-width: 10px;
默认值,一般都是3个像素
border-width 可以用来指定四个方向的边框的宽度
值的情况：
四个值: 上 右 下 左 顺时针
三个值: 上 左右 下
两个值: 上下 左右
一个值: 上下左右
除了 border- width还有一组 border-×xx- width
xx可以是 top right bottom 1eft
用来单独指定某一个边的宽度
*/
border-width: 10px;
/* border-top-width: 10px;
border-left-width: 30px; */
/*
border- color用来指定边框的颜色, 同样可以分别指定四个边的边框
规则和 border- width
border- color也可以省略不写,如果省略了则自动使用 color的颜色值
*/
border-color: red;
/*
border- style指定边框的样式
solid表示实线
dotted点状虚线
dashed虚线
double双线
border- style的默认值是none表示没有边框
*/
border-style: solid;
/*
border简写属性,通过该属性可以同时设置边框所有的相关样式,并且没有顺序要求
除了 border以外还有四个 border-xxx
border-top
border-right
border-bottom
border-left
*/
/* border: solid 10px orange; */
/* border-top: 10px solid orange; */
border: 10px red solid;
border-right: none;
}
</style>
</head>
<body>
<div class="box1"></div>
<img src="./盒子模型.png" alt="hezi">
</body>
</html>
04.盒子模型-内边距
<!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>
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
border: 10px orange solid;
/*
内边距( padding)
- 内容区和边框之间的距离是内边距
- 共有四个方向的内边距
padding-top
padding-right
padding-bottom
padding-left
- 内边距的设置会影响到盒子的大小
- 背景颜色会延伸到内边距上
一共盒子的可见框的大小,由内容区内边距和边框共同决定
所以在计算盒子大小时,需要将这三个区域加到一起计算
*/
/* padding-top: 100px;
padding-left: 100px; */
/*
padding内边距的简写属性,可以同时指定四个方向的內边距
规则和 border- width一样
*/
padding: 10px 20px 30px 40px;
}
.inner{
width: 100%;
height: 100%;
background-color: orchid;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="inner"></div>
</body>
</html>
05.盒子模型-外边距
<!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>
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
border: 10px orange solid;
/*
外边距( margin)
- 外边距不会影响盒子可见框的大小
- 但是外边距会影响盒子的位置
- 一共有四个方向的外边距
margin-top
- 上外边距,设置一个正值,元素会向下移动
margin-right
- 默认情况下设置 margin- right不会产生任何效果
margin-bottom
- 下外边距,设置一个正值,其下边的元素会向下移动
margin-left
- 左外边距,设置一个正值,元素会向右移动
- margin也可以设置负值,如果是负值则元素会向相反的方向移动
- 元素在页面中是按照自左向右的顺序排列的
所以默认情况下如果我们设置的左和上外边距则会移动元素自身
而设置下和右外边距会移动其他元素
- margin的简写属性
margin 可以同时设置四个方向的外边距,用法和 padding 一样
*/
margin-top: 100px;
}
.box2{
width: 220px;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
06.盒子的水平布局
<!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>
.outer{
width: 800px;
height: 200px;
border: 10px red solid;
}
.inner{
width: auto;
height: 200px;
background-color: #bfa;
margin-left: 100px;
margin-right: 100px;
/*
元素的水平方向的布局:
元素在其父元素中水平方向的位置由以下几个属性共同决定
margin-left
border-left
padding-left
width
padding-right
border-right
margin-right
一个元素在其父元素中,水平布局必须要满足以下的等式
margin-left+ border-left+ padding-left+ width+ padding-right+ border-right+ margin-right
=其父元素内容区的宽度(必须满足)
0 + 0 + 0 + 200 + 0 + 0 + 0 = 800
0 + 0 + 0 + 200 + 0 + 0 + 600 = 800
- 以上等式必须满足,如果相加结果使等式不成立,则称为过渡约束,则等式会自动调整
- 调整的情况
如果这七个值中没有为auto的情况,则浏览器会自动调整 margin- right值以使等式满足
- 这七个值中有三个值和设置为auto
width
margin-left
- 如果某个值为auto,则会自动调整为auto的那个值以使等式成立
0 + 0 + 0 + auto + 0 + 0 + 0 = 800 auto = 800
- 如果将宽度和一个外边距设置为auto,则宽度会调整到最大,设置为auto的外边距会自动为0
- 如果将三个值都设置为auto, 则外边距都是0, 宽度最大
- 如果将两个外边距设置为auto,宽度固定值,则会将外边距设置为相同的值
所以我们经常利用这个特点来使一个元素在其父元素中水平居中
*/
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
07.盒子的垂直方向布局
<!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>
.outer{
background-color: #bfa;
/*
默认情况下父元素的高度被内容撑开
*/
}
.inner{
height: 200px;
background-color: yellow;
width: 100px;
margin-bottom: 100px;
}
.box1{
width: 200px;
height: 400px;
background-color: red;
/*
元素是在父元素的内容区中排列的
如果子元素的大小超过了父元素,则子元素会从父元素中溢出
使用 overflow属性来设置父元素如何处理溢出的子元素
可选值
visible, 默认值子元素会从父元素中溢出,在父元素外部的位置显示
hidden 溢出内容将会被裁剪不会显示
scroll 生成两个滚动条,通过滚动条来查看完整的内容
auto 根据需要生成滚动条
overflow-x
overflow-y:
*/
overflow: scroll;
}
.box2{
width: 100px;
height: 200px;
background-color: royalblue;
}
</style>
</head>
<body>
<!-- <div class="outer">
<div class="inner"></div>
<div class="inner"></div>
</div> -->
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
251
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
