前端 - CSS布局

CSS文档

目录

页面布局的核心是盒子模型、浮动和定位

盒子模型

盒子用来封装HTML元素，盒子模型的组成部分包括：

  • 边框(border)
  • 实际内容(content)
  • 内边距(padding)
  • 外边距(margin)

border

指盒子周围一圈边框的样式。

属性 作用
border-width 粗细，常用单位px
border-style 样式，常用的有：实线solid、虚线dashed、点线dotted
boder-color 颜色

可以进行复合写法：

div {
    width: 300px;
    height: 200px;
    /* 没有顺序 */
    border: 10px solid skyblue;
    /* 只设定上边框 */
    border-top: 5px dotted red;
}

边框会影响盒子的实际大小，此时盒子的大小应该是320px*220px。

表格边框

当给表格添加边框时，将相邻边框进行合并，否则2个盒子的边框会叠加，导致边框成为2px的大小。

table,
th,
td {
    border: 1px solid skyblue;
    /* 相邻边框合并 */
    border-collapse: collapse;  
}

padding

内边距指盒子的边框和内容之间的距离。可以分别设置到上边框、下边框、左边框、右边框的距离。

div {
    width: 200px;
    height: 200px;
    background-color: skyblue;
    padding-left: 15px;
    padding-top: 10px;
    padding-bottom: 20px;
}
padding参数 表达意义
padding: 5px; 上下左右都是5px内边距
padding: 5px 10px; 上下5px内边距，左右10px内边距
padding: 5px 10px 15px; 上5px内边距，左右10px内边距，下15px内边距
padding: 5px 10px 15px 20px; 顺时针，上5px，右10px，下15px，左20px

如果盒子已经有了高度和宽度，此时再指定padding，会撑大盒子。例如下方，盒子的大小会变成240px*230px。

div {
    width: 200px;
    height: 200px;
    background-color: skyblue;
    padding: 10px 20px 20px;
}

padding应用：新浪导航栏

<div class="nav">
    <a href="#">设为首页</a>
    <a href="#">手机新浪网</a>
    <a href="#">移动客户端</a>
    <a href="#">博客</a>
    <a href="#">微博</a>
    <a href="#">关注我</a>
</div>

.nav {
    height: 41px;
    border-top: 3px solid #ff8500;
    border-bottom: 1px solid #edeef0;
    background-color: #fcfcfc;
}
.nav a {
    /* 更改显示模式为行内块 */
    display: inline-block;
    /* 更改行高为41px，和nav一样高 */
    height: 41px;
    color: #4c4c4c;
    padding: 0px 20px;
    text-decoration: none;
    /* 文字居中 */
    line-height: 41px;
}
.nav a:hover {
    color: #ff8500;
    background-color: #eee;
}

padding不撑开盒子

如果盒子本身没有指定width/height属性，此时padding不会撑开盒子。

<div class="test1">
    <p></p>
</div>
<div class="test2">
    <p></p>
</div>

div {
    width: 300px;
    height: 200px;
    background-color: pink;
}

.test1>p{
    padding: 20px 30px;
    background-color: skyblue;
}

.test2>p{
    /* 指定了width */
    width: 100%;
    padding: 20px 30px;
    background-color: skyblue;
}

显示效果：

![image-20211129152049528](/Users/menghuixiao/Library/Application Support/typora-user-images/image-20211129152049528.png)

margin

外边距用来控制盒子与盒子之间的距离，用法和padding相同。

<div class="one">1</div>
<div>2</div>

div {
    width: 50px;
    height: 100px;
    background-color: skyblue;
}

.one {
    margin-bottom: 50px;
    margin-left: 100px;
}

效果如下：

1
2

水平居中

外边距可以让盒子水平居中，但是必须满足：

  • 盒子指定了宽度width
  • 盒子左右的外边距设置为auto
<div class="one">1</div>

div {
    width: 50px;
    height: 100px;
    background-color: skyblue;
}

.one {
    /* 上下外边距为0，左右为auto */
    margin: 0 auto;
}

效果如下：

1

常见的3种写法：

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

需要注意，以上的做法只对块元素有效，对于行内块元素和行内元素，想要他们水平居中，则需要给其父元素添加text-align: center;。

外边距合并

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

当上下相邻的两个元素，上面的元素设置了margin-bottom，下面的元素设置了margin-top，则它们之间的垂直间距不是二者之和，而是margin-bottom和margin-top之间较大的一个。

例如下面的两个div之间的距离为200px。

<div class="one">1</div>
<div class="two">2</div>

div {
    width: 200px;
    height: 200px;
    background-color: skyblue;
}
.one {
    margin-bottom: 100px;
}
.two {
    margin-top: 200px;
}

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

对于两个嵌套关系的元素，当父元素和子元素都设置了上外边距，此时父元素会塌陷二者中较大的外边距值。

<div class="father">
    <div class="son"></div>
</div>

.father {
    width: 200px;
    height: 200px;
    background-color: skyblue;
    margin-top: 20px;
}
.son {
    width: 100px;
    height: 100px;
    background-color: pink;
    margin-top: 50px;
}

此时父元素会向下塌陷30px，父元素和子元素相对位置不变。解决方法有：

  1. 为父元素设置一个透明的上边框border-top: 10px solid transparent;
  2. 为父元素定义上内边距padding-top: 1px;
  3. 为父元素添加overflow: hidden;

绝对定位的盒子不会有塌陷问题，例如浮动、固定。

清除内外边距

一般来说，css文件都需要在第一行写上下面的代码，清除网页元素带有的默认内外边距(例如列表的<li>标签)。

* {
    padding: 0;
    margin: 0;
}
  • 行内元素只设置左右内外边距，不设置上下内外边距

CSS3新增样式

圆角边框

CSS3新增了圆角边框样式，使用border-radius属性，可以是数值也可以是百分比。

div {
    width: 200px;
    height: 100px;
    background-color: skyblue;
    border-radius: 10px;  /* 圆角半径 */
}

效果如下

画圆或者圆角矩形

  • 正方形需要将border-radius属性修改为50%
  • 矩形将border-radius属性修改为高度的一半
/* 如果是正方形，则设置成50% */
.circle {
    height: 100px;
    width: 100px;
    background-color: skyblue;
    border-radius: 50%;
}

/* 如果是矩形设置50%，会画一个椭圆 */
.ellipse {
    height: 20px;
    width: 100px;
    background-color: skyblue;
    border-radius: 50%;
}

/* 高度的一半 */
.search {
    height: 20px;
    width: 100px;
    background-color: skyblue;
    border-radius: 10px;
}

效果如下：

参数值个数

border-radius: 10px;是简写，表示每个角都是半径为10px，其他参数个数表示：

  • border-radius: 10px 5px;: 左上/右下半径10px、右上/左下半径5px
  • border-radius: 10px 5px 20px;:左上半径5px、右上/左下半径5px、右下半径20px
  • border-radius: 10px 5px 20px 30px;: 顺时针，左上角、右上角、右下角、左下角

效果如下：

border-radius属性也可以分开写：

  • 左上角：border-top-left-radius
  • 右上角：border-top-right-radius
  • 右下角：border-bottom-right-radius
  • 左下角：border-bottom-left-radius

盒子阴影

用法：box-shadow: h-shadow v-shadow blur spread color inset;

值 描述
h-shadow 必需，水平阴影的位置，允许负值
v-shadow 必需，垂直阴影的位置，允许负值
blur 可选，模糊距离(影子的虚实)
spread 可选，阴影尺寸(影子的大小)
color 可选，阴影颜色
inset 可选，将外部阴影(outset)改为内部阴影 
div {
    height: 80px;
    width: 100px;
    background-color: skyblue;
    box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, .3);
}

效果如下：

文字阴影

用法：text-shadow: h-shadow v-shadow blur color;

值 描述
h-shadow 必需，水平阴影的位置，允许负值
v-shadow 必需，垂直阴影的位置，允许负值
blur 可选，模糊距离(影子的虚实)
color 可选，阴影的颜色 
div {
    font-size: 30px;
    color: orange;
    font-weight: 700;
    text-shadow: 5px 5px 6px rgba(0, 0, 0, .3);
}

效果如下：

Test Test Test

浮动

浮动简介

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

  1. 普通流(标准流)：标签按照规定好的默认方式排列
    • 块级元素独占一行：例如常用的<div>标签、<p>标签、<ul>标签等
    • 行内元素按照顺序从左到右排列，碰到父元素边缘自动换行：例如常用的<span>标签、<a>标签、<em>标签等
  2. 浮动
  3. 定位

有很多布局效果，标准流没办法完成，可以使用浮动。浮动可以改变元素标签默认的排列方式。其典型应用有：

  • 让多个块级元素在一行排列显示

网页布局准则：多个块级元素纵向排列使用标准流，横向排列使用浮动 。一般来说，先用标准的父元素排列上下位置，之后内部子元素采取浮动排列左右位置。

浮动用法

float属性用来创建浮动框，将其移动到一边，直到左边缘/右边缘触及到块元素或者另一个浮动框的边缘，用法为float: left;。

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

div {
    height: 100px;
    width: 150px;
    background-color: orangered;
    float: left;
}

效果如下：

Test
Test

浮动特性

脱标

  1. 脱离标准流的控制(浮)，移动到指定位置(动)
  2. 浮动的盒子不再保留原先位置
<div class="float-box">Float box</div>
<div class="standard-box">Standard box</div>

.float-box {
    height: 100px;
    width: 150px;
    background-color: orangered;
    float: left;
}
.standard-box {
    height: 200px;
    width: 250px;
    background-color: skyblue;
}

效果如下：

Float box
Standard box

浮动元素一行显示

如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列。

  • 浮动的元素是互相贴靠在一起的，如果父级宽度装不下这些浮动的盒子，多出来的盒子会另起一行对齐

浮动元素拥有行内块元素特性

如果行内元素有了浮动属性，不需要转换为块级/行内块元素，也可以设置宽高。

  • 块级元素如果没有设置宽度，默认继承父元素宽度，但是如果设置为浮动，它的宽度由内容的大小决定
  • 浮动的盒子没有缝隙
<span>1</span>
<span>2</span>
<div>3333333</div>

span {
    height: 100px;
    width: 150px;
    background-color: orangered;
    float: left;
}
div {
    height: 200px;
    background-color: skyblue;
    float: right;
}

效果如下：

12
3333333

浮动布局注意点

  • 一个元素浮动了，理论上其余的兄弟元素也要浮动
  • 浮动的盒子只会影响其后面的标准流，而不会影响其前面的标准流

清除浮动

为什么要清除浮动

之前写的浮动元素有一个特点，它们的标准流父元素都是写好高度的。

在一些情况下，我们不希望写父元素的高度，而是让子元素撑开父元素，子元素内容有多少，父元素就有多高。这样写在没有浮动的情况下是没问题的。例如：

<div>
     <p>123123123123123123</p>
</div>

此时<div>标签的高度会随着<p>标签的内容增多而变大。但是，如果将<p>标签设置成浮动的，<p>标签不占有位置，则父级元素<div>标签的高度就是0，这样会影响后面的标准流标签。

例如：

<div class="box1">
    <p>123</p>
    <p>456</p>
</div>
<div class="box2"></div>

.box1 {
    background-color: pink;
}
.box1>p {
    width: 150px;
    height: 100px;
    background-color: skyblue; 
    float: left;
}
.box2 {
    height: 50px;
    background-color: tomato;
}

效果如下：

123
456

此时box1的高度为0，所以box2会在浮动元素下。

清除浮动的本质

本质就是清除浮动元素造成的影响：

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

清除浮动的属性

使用clear属性，在实际开发中，最常使用clear: both;。

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

清除浮动的策略是，闭合浮动，即让浮动元素只影响其父盒子，不影响其他的盒子。

清除浮动的方法1: 额外标签法

对于上面的问题，可以在浮动元素末尾添加一个块级空标签，例如<div style="clear: both;"></div>，或者其他标签，例如<br style="clear: both;">。

修改上面的html文件为：

<div class="box1">
    <p>123</p>
    <p>456</p>
    <div style="clear: both;">
</div>
<div class="box2"></div>

效果如下：

123
456
  • 这样做的缺点是会有很多无意义的标签，结构化较差

清除浮动的方法2: 父级元素添加overflow

将父级元素的overflow属性设置为: auto, hidden, 或scroll

上面的box1的css修改为：

.box1 {
    background-color: pink;
    overflow: auto;
}
  • 这样做的缺点是无法显示溢出的部分

清除浮动的方法3: 父元素添加after伪元素

给box1添加clearfix类，本质上也是在父元素最后添加了一个块元素。

.clearfix:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {
    /* IE6/7专有, 因为不支持:after */
    *zoom: 1; 
}

清除浮动的方法4: 父元素添加双伪元素

给box1添加clearfix类，本质上也是在父元素前后添加元素。

.clearfix::before, 
.clearfix:after {
    content: "";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1; 
}

定位

  1. 浮动可以让多个块级盒子在一行内没有缝隙排列显示，经常用于横向排列盒子
  2. 定位则是让盒子自由地在某个盒子内移动或者固定在屏幕中某个位置，并且压住其他盒子

定位组成

定位=定位模式+边偏移

定位模式通过position属性设置：

值 语义
static 静态定位
relative 相对定位
absolute 决对定位
fixed 固定定位

边偏移指定位盒子移动的最终位置，有4个属性值：

边偏移属性 描述
top 定位元素相对其父元素上边线的距离
bottom 定位元素相对其父元素下边线的距离
left 定位元素相对其父元素左边线的距离
right 定位元素相对其父元素右边线的距离

定位模式

static

静态定位是元素默认的定位方式，即无定位。

  1. 静态定位按照标准流特性摆放位置，没有边偏移
  2. 静态定位在布局时很少用到

relative

相对定位，特点有：

  1. 移动位置时的参照点是原来的位置
  2. 原来的标准流的位置继续占有，后面的盒子仍然以标准流的方式对它，即不脱标
<div class="test1"></div>
<div class="test2"></div>

.test1 {
    position: relative;
    top: 100px;
    left: 200px;
    height: 150px;
    width: 200px;
    background-color: skyblue;
}

.test2 {
    height: 150px;
    width: 300px;
    background-color: pink; 
}

效果如下：

absolute

绝对定位的元素在移动时，是相对于祖先元素来说的，特点：

  1. 如果元素没有祖先元素或者祖先元素没有定位，则以浏览器为准定位(Document文档)
  2. 如果祖先有定位(相对/绝对/固定定位)，则以最近一级有定位的祖先元素为参考点进行移动
  3. 绝对定位不再占有原来的位置(脱标)

相对定位经常用来作为绝对定位的父级，因为常常遇到父级需要占用位置，子盒子不需要的情况。

fixed

固定定位是元素固定于浏览器可视区的位置，主要用于在浏览器页面滚动时元素的位置不会改变，特点：

  1. 以浏览器的可视窗口为参考进行移动
    • 和父元素没有关系
    • 不随着滚动条滚动而滚动
  2. 固定定位不占有原来的位置，即脱标
    • 固定定位可以看作是一种特殊的绝对定位

可以将元素固定在版心右侧：

  1. 让固定定位的盒子left: 50%;，走到浏览器的中间
  2. 让固定定位的盒子margin-left，走版心宽度的一半距离

sticky

粘性定位可以看作是相对定位和固定定位的混合，特点有：

  1. 以浏览器的可视窗口为参考点进行移动
  2. 占有原先的位置
  3. 必须添加top, left, right, bottom中的一个才有效

定位叠放次序

盒子重叠时，使用z-index来控制盒子的前后顺序，例如z-index: 1;，需要注意：

  1. 数值可以是正整数、负整数或0，默认是auto，数值越大，盒子越靠上
  2. 如果值相同，按照书写顺序，后来居上
  3. 数字后面不加单位
  4. 只有定位的盒子才有z-index属性

定位的拓展

绝对盒子居中

div {
    position: absolute;
	/* 垂直居中 */
    top: 50%;
    margin-top: -75px;
    /* 水平居中 */
    left: 50%;
    margin-left: -150px;
    height: 150px;
    width: 300px;
    background-color: pink; 
}

定位的特性

绝对定位和固定定位和浮动类似：

  1. 行内元素添加了绝对/固定定位，可以直接设置高度和宽度
  2. 块级元素添加绝对/固定定位，如果不给宽高，默认大小是内容的大小，不再是整行

绝对/固定定位会完全压住下面的盒子

  • 浮动元素只会压住它下面标准流的盒子，但不会压住下面标准流盒子的文字/图片，这是因为浮动最初是为了做文字环绕效果的
  • 绝对/固定定位会压住下面标准流所有的内容

元素的显示与隐藏

display

使用display: none;隐藏对象，不再占有原来的位置。可以修改为display: block;使元素再显示出来。

visibility

隐藏后继续占有原来的位置。

  • 元素隐藏：visibility: hidden;
  • 元素可见：visibility: visible;

overflow

对溢出的部分(超出盒子指定的高和宽的部分)进行显示与隐藏：

属性值 描述
visible 默认值，不剪切内容也不添加滚动条
hidden 将超出部分剪切
scroll 总是显示滚动条
auto 超出显示滚动条，不超出则不显示 
<div class="test">
    层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（
    标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
    CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
</div>

.test {
    height: 150px;
    width: 200px;
    background-color: skyblue;
}

将overflow属性分别设置成上面hidden, scroll, auto，效果如下：

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（ 标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。 CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（ 标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。 CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（ 标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。 CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS属性书写顺序

建议顺序：

  1. 布局定位属性: display, position, float, clear, visibility, overflow
  2. 自身属性: width, height, margin, padding, border, background
  3. 文本属性: color, font, text-decoration, text-align, vertical-align, white-space, break-word
  4. 其他属性(CSS3): content, cursor, border-radius, box-shadow, text-shadow
posted @ 2021-12-07 13:57  lv6laserlotus  阅读(57)  评论(0)    收藏  举报