2020-03-12   manu /Front-end/CSS/2.盒子模型与定位.html 99+   21 分钟   3.1 k0次访问

盒子模型与定位

CSS

CSS在处理网页时，认为每个元素是一个盒子，网络布局就相当于摆放盒子

边框

边框里面由内边距和内容区

  • 设置边框，必须指定三个样式，宽度和颜色和样式 
1
2
3
4
5
6
7
8
div{
    background-color: #008000;
    width: 100px;
    height: 100px;
    border-width:10px ;
    border-color: #FF0000;
    border-style:solid ;
}
  • 分别设置每个边框的宽度，颜色，样式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/*{上 右 下 左}
{上 左右 下}
{上下 左右}
{上下左右}*/
/*第一种形式*/
div{
    	border-width: 10px 20px 10px 20px;
    	border-color:  red green black blue;
    	border-style: solid double dotted;
}
/*第二种形式
border-x-color/style/width
x为top,left,right,bottom
*/
div{
    	border-top-color: red;
    	border-right-style: solid;
}

  • style

    none无边框

    solid实线

    dotted点状边框

    dashed虚线

    double双线

  • 简写

1
border: 10px solid red;

​ border-x单独设置某边

​ 指定border就等于同时指定四边

​ 也可以用border-x:none;取消某边

内边距

内容区与边框之间的东西，会影响整个盒子的大小

  • 边距只能设置宽度
1
2
3
4
5
6
div{
    background-color: #008000;
    width: 100px;
    height: 100px;
    padding-top:10px ;
}

  • background-color会填充整个盒子的范围

  • 盒子可见框宽度由内边距，内容区，边框决定

    boder-left+padding-left+width+boder-right+padding-right

  • 当盒子（块）宽默认时，padding水平值不会影响盒子宽

  • 简写

1
2
padding: 10px 2em 1;
/*更多同border*/

外边距

指与其他元素的间距，不影响盒子可见宽度，元素默认靠左上

  • 当前间距＞设置间距时不变

  • 可指定负值，会朝反方向移动

1
2
margin-top:100px;
margin-right: -100px;

  • 水平方向可以设置auto，会将外边距设置为最大值

  • 垂直方向外边距设置为auto，与默认没区别

  • 左右都设置auto，则左右相等，也就是在父元素居中

  • 简写

1
margin: 10px 3em 300% 39px;

垂直外边距的重叠

box1和box2是相邻的兄弟元素

1
2
3
4
5
6
7
8
9
10
11
12
#box1{
        background-color: red;
        width: 100px;
        height: 100px;
        margin-bottom: 100px;
}
#box2{
        background-color: green;
        width: 100px;
        height: 100px;
        margin-top: 100px;
}

  • 相邻的兄弟元素外边距重叠时取最大值

  • 相邻的父子元素垂直外边距重叠时，子元素的会传给父元素

    但我们一般不想要这种重叠，所以有几个解决方法

  • 方法一

    加内容，或用border和padding使其不相邻，但影响可见宽度

    或者给父元素加内边距（子元素取消外边距），但影响了可见框，需要控制宽高

  • 方法二

    1.相邻的地方加一个table可以阻止相邻(但添加了无用结构)

    2.使用:before和display替换成table，类似1的方法(完美方案)

    试例代码}/用content添加内容/

1
2
3
4
5
/*CSS3 引入 ::before  是为了将伪类和伪元素区别开来。浏览器也接受由CSS 2 引入的 :before 写法*/
::before{
content:' ';
display:table;
}

内容区

放置子元素的地方

因为浏览器都有一些默认的边框，边距，不利于布局，所以需要清除浏览器默认样式

1
2
3
4
*{
margin: 0;
padding: 0;
}

内联元素的盒子

内联元素：span a iframe img

  • 不能设置width和height

  • 可以设置padding-top/bottom，但不会影响布局（会影响显示效果）

  • 可以设置padding-left/right，影响左右

  • 设置border-top/bottom，但不会影响布局（会影响显示效果）

  • 可以设置border-left/right，影响左右

  • 设置margin-left/right，外边距重合时不会重叠，而是相加

  • 不支持垂直margin

display和visibility

1
display: inline;

可以修改元素的类型

  • 值

    inline变成行内元素

    block变为块元素

    inline-block行内块元素（既有宽高，也不换行）

    table具有表格特征
    none隐藏元素，且不占位置

1
visibility: visible;

  • 值

    visible默认值

    hidden隐藏，但占位置

overflow

子元素默认是在父元素的内容区的，但子元素如果比父元素大，则默认会显示到父元素外，通过overflow可以控制溢出内容

  • 值

    visible默认值

    hadden砍掉溢出的

    scroll加上滚动条，但不管内容是否溢出

    auto根据需求添加scroll]

文档流

网页的底层，表示一个页面的位置，创建的元素默认在文档流中

特点

  • 块元素独占一行，自上而下
  • 块元素默认宽度是父元素的100%
  • 默认高度被内容撑开
  • 内联元素在文档中只占自身大小，默认从左到右排列
  • 内联高宽都被内容撑开

float浮动

要使块元素水平排列，可以使元素脱离文档流

值

none默认在文档流中

left，right左右浮动

1
float: left;

当给元素设置浮动后，元素脱离文档流，位置也会变，尽量像左上和右上移，直到遇到父边界或者其他浮动元素，如果浮动元素上面是一个块元素，则浮不上去，浮动的元素不会超过他上边的兄弟元素，顶多和他对齐

特点

  • 浮动元素不能盖住文字，文字会环绕在浮动元素周围

  • 块元素浮动后高宽默认被文字撑开

  • 内联元素浮动变块元素

高度塌陷

浮动元素的缺点就是脱离文档流后父元素的高度塌陷（无法撑开父元素）

若给父元素高度写死，则父元素不会随子元素变化

BFC

Block Formatting Context是w3c的一个隐含环境，默认关闭

特点

  • 父元素和子元素的垂直外边距不会重叠

  • 开启的元素不会被浮动元素覆盖

  • 开启的元素可以包含浮动的元素

设置方法(加下滑线是推荐方式)

1.设置元素浮动

虽然可以撑开父元素，但父元素的宽度塌陷（不会布满父元素，随内容撑开），且影响

布局

2.设置元素绝对定位position

3.设置父（塌陷）元素为inline-block

不会影响布局，但宽度依然塌陷

4.将塌陷元素的overflow设置为非visible

推荐hidden（副作用小，与相对定位冲突）

不兼容IE6

5.clear

  • left

  • right

  • both清除影响大的

6.后塌陷的父元素添加一个空白子块素

通过clear清楚影响，兼容性好，唯一的缺点就是添加多余的结构

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box1{
				border:10px red solid;
			}
			.box2{
				width: 100px;
				height: 100px;
				background-color: #008000;
				float:left;
			}
			.clear{
				clear:both;
			}
		</style>
	</head>
	<body>
		<div class="box1">
			<div class="box2"></div>
			<div class="clear"></div>
		</div>
	</body>
</html>

7.同6原理，利用:after，给父元素加上:after

content必须加””，而且没有多余的结构

代码(以后的元素出现塌陷，只需要加上从class="clearfix"就行了)

1
2
3
4
5
6
.clearfix:after{
content:"";
display:block;
clear:both;
}
/*ie6不支持*/

在IE6中是开启haslayout解决，使用zoom:1，zoom表示放大；或指定一个宽度

定位

可以任意访问元素的位置

1
2
3
4
5
6
position: static;
position: relative;
left: 10px;/*相对左边移动*/
right: 10px;/*相对右边移动*/
top: 10px;/*相对上边移动*/
bottom: 10px;/*相对下边移动*/

static默认值

相对定位

relative

特点

1.相对是相对原来位置(相对自身移动)

2.相对定位的元素不会脱离文档流

3.会使元素提升一个层级

4.相对定位不会改变元素的性质

5.开启相对定位而不设置偏移量，也不会变化

[new]粘滞定位

1
2
position: sticky;
top: 0px;
  • 和相对定位差不多
  • 主要特点就是在到达某个位置时固定不动
  • 相对于他的父元素定位
  • 当然因为比较新，所以兼容性不是很好（指IE）

绝对定位

absolute

特点

1.绝对定位会使元素脱离文档流

2.需要设置偏移量

3.相对于最近的开启定位的祖先元素定位的(一般开启子元素的absolute要开启父元素的relative)，如果所有的祖先元素都没有定位，就相对于浏览器窗口进行定位

4.提升层次

5.会改变元素性质，内联变块，块变内联

位置

  • 水平布局

left + margin-left + border-left + padding-left + width + padding-right + border-right + margin-left + right = 父元素的内容区

开启绝对定位后，如果过度约束（left=0，right=0）

  • 9个值没有auto则自动调整right使等式满足
  • 有auto则调整auto

因为right和left的默认值时auto，默认会先调整这两个使等式满足

  • 垂直布局

top + margin-top/bottom + padding-top/bottom + bordet-top/bottom + bottom=包含块的高度

  • 同理，top和bottom默认是auto，会先调整这两个

实现双向居中

1
2
3
4
5
top:0;
bottom:0;
left:0;
right:0;
margin:auto;

固定定位

fixed（也是绝对定位的一种）

1.固定在浏览器上不随浏览器滚动而滚动

2.与绝对定位不同的是，固定定位永远相对于浏览器窗口定位

怎么设置偏移量?

通过来left right top bottom设置偏移量

通常使用两个就够了，水平一个，垂直一个

元素的层级

1
z-index:4;/*开启定位才能用*/

  • 如果定位层级一样，则下面的元素会盖住上面的

  • 但父元素层级再高也不能盖住子元素

  • z-index（开启定位才能用）代表元素的层级

    • 默认值auto

    • 正值表示离用户越近

    • 负值表示离用户越远

  • 层级高，优先显示

opacity

设置元素的透明程度

1
opacity: 0.5;

  • 可选值0-1

  • ie8及以下使用filter:alpha(opacity:0-100)进行透明

1
filter:alpha(opacity:50)

背景

background-color

设置背景颜色

background-image

1
background-image: url(img/1.jpg);

插入图片

  • url（相对路径）

  • 如果图片大于元素，默认显示左上角

  • 等于就全显示

  • 小于则默认将图片重复平铺充满元素

  • 一般同时指定背景图片和颜色，因为图片加载慢

  • 背景图片默认左上角

background-repeat

设置背景图片重复方式

  • repeat默认值，双方向重复

  • no-repeat不重复

  • repeat-x沿水平方向重复

  • repeat-y沿垂直方向重复

bacground-position

设置图片开始的位置（相对于父元素）

  • 可以使用right left top botton center的两个来指定一个图片的位置
1
2
3
background-position: right bottom
background-position: right center
background-position: center

  • 也可用x% y%指定

    • ​ 比如左上0% 0%

    • ​ 左下0% 100%

  • xpx ypx设置偏移量来指定位置

    • 正值向右或下

    • 负值向左或上

    • 如果只设置一个值，则另一个是50%

background-attachment

设置背景图片是否跟着页面滚动而滚动

  • scroll默认值，滚动

  • fixed固定

  • 设置fixed时，永远相对于浏览器窗口

  • 不随窗口滚动的图片，一般给body

简写

1
backgroud: red  url(img01.jpg) center fixed no-repead ;

  • 没有顺序和数量要求

  • 注意覆盖

加载闪烁

在引入外部文件时，浏览器只会在使用时才会去加载，需要一定时间，会导致闪烁，比如按钮图片

解决方法

  • 整合所有图片成一张图片

  • 使用background-position改变图片位置达到一次加载不闪烁的问题

这种技术叫CSS-Sprite

优点

  • 发送一次请求，加载多个图片

  • 体积小

  • 加载快，提升了用户体验

reset.css

清除浏览器样式的css文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
@charset 'utf-8';
/*这些元素都建议重新初始化*/
body,div,dl,dt,dd,ul,ol,li,tr,td,th,
h1,h2,h3,h4,h5,h6,hr,br,img,table,
input,form,a,p,textarea{
    padding:0;
    margin:0;
    font-family:Arial,'Microsoft YaHei','宋体';
}
/*去掉列表默认排列*/
ul,ol,li{
    list-style:none;
}
/*去掉底部横线*/
/*把a元素更改设置成块级元素，这个根据实际情况决定要不要*/
a{
    text-decoration:none;
    display:block;
}
/*img标签要清除border。*/
/*display设为block设置为块级元素，默认为display:inline;
存在下边线多出4px状况,所以一般设为block*/
img{
    border:0;
    display:block;
}
/*清除浮动破坏带来的塌陷及父子外边距重叠问题*/
/*清除浮动的兼容IE*/
.clearfix {
	zoom: 1;
}
.clearfix::after，.clearfix::before {
	display:table;
	clear:both;
	content:"";
}

参考，本人做了一点修改

盒子模型与定位

http://yangchaohe.github.io/Front-end/CSS/2.盒子模型与定位.html

作者

manu

发布于

2020-03-12

更新于

2023-01-06

许可协议

# 相关文章
  1.CSS基础
  2.响应式布局
  3.CSS里面的像素
  4.简单使用less
  5.各种盒子特效
# 推荐文章
  1.ALTER
  2.数据库笔记
  3.微信小程序笔记
  4.动态调试-OD
  5.winPE结构
  6.git指令

喜欢这篇文章？打赏一下作者吧

通知

  • 2021.6.28 公告测试
关注我

:D 一言句子获取中...

最新文章

标签

英语15
语法12
技能大赛-信息安全11
CS6200-28X-EI8
manjaro4
DCFW-1800E-N30023
数据库3
正则表达式3
系统优化3
CPU2
DHCP2
Linux2
MySQL2
PHP2
TCP2
UDP2
bash2
内存2
函数2
剪辑2
查看全部>>
×