Day 6

最新推荐文章于 2024-03-26 09:14:45 发布

高先森真的不高

最新推荐文章于 2024-03-26 09:14:45 发布

阅读量91

点赞数

本文链接：https://blog.csdn.net/JIUJIE_yz/article/details/101020703

版权

content宽度和高度

使用宽度属性width和高度属性height可以对盒子的大小进行控制。

width和height的属性值可以为不同单位的数值或相对于父元素的百分比%，实际工作中最常用的是像素值。

大多数浏览器，如Firefox、IE6及以上版本都采用了W3C规范，符合CSS规范的盒子模型的总宽度和总高度的计算原则是：

  /*外盒尺寸计算（元素空间尺寸）*/
  Element空间高度 = content height + padding + border + margin
  Element 空间宽度 = content width + padding + border + margin
  /*内盒尺寸计算（元素实际大小）*/
  Element Height = content height + padding + border （Height为内容高度）
  Element Width = content width + padding + border （Width为内容宽度）

1.width，height仅使用块级元素，对行内元素无效

2.计算盒子总高度时，还应考虑上下两个盒子的外边距合并情况

3.如果一个盒子没有给定宽度和高度时，padding不会影响盒子大小

盒子模型布局稳定性

什么时候用内边距，什么时候外边距

我的回答是，这两者可以混用，

width > padding > margin

1.margin外边距合并问题，ie6 margin加倍的bug，所以最后使用

2.padding会影响内盒的大小，经常使用加减法

3.width 宽度剩余法，高度剩余法

CSS3盒模型

CSS3中可以通过box-sizing 来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。

1.content-box ：盒子模型 width + padding + boder

2.border-box：/盒子模型即为宽度 padding 和boder 都包含再width/

1.默认设置，优先保证内部的内容所占区域不变
2.boder-box  优先保证自己盒子的所占区域不变，对内容进行压缩

盒子阴影

语法格式：

box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色  内/外阴影；

1.前两个属性一定要有，其他的可以省略

2.外阴影(outset默认值，内阴影inset

浮动(float)

普通流(normal flow)

文档流，标准流，普通流

前面我们说过，网页布局的核心，就是用CSS来摆放盒子位置。如何把盒子摆放到合适的位置？

css中三种定位机制：普通流，浮动，定位

html中相当重要的概念,一个网页中，标签从上而下，从左至右顺序排序的意思，这种布局称之为普通流

浮动(float)

浮动最早是用来控制图片，以便达到其他元素（特别是文字）实现“环绕”图片的效果。

后来，我们发现浮动可以使任何盒子一行排列，因此我们渐渐偏离主题，用浮动的特性进行布局

什么是浮动？

元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。

在CSS中，通过float属性来定义浮动，其基本语法格式如下：

选择器{float:属性值;}

属性值	描述
left	元素向左浮动
right	元素向右浮动
none	元素不浮动（默认值）

浮动详细内幕特性

浮动脱离标准流，不占位置，会影响标准流。浮动只有左右浮动。

标准流父级

1.子盒子浮动不会压住padding

2.浮动的元素会找最近的父级元素对齐，不会超出内边距的范围

浮动的目的是，让多个块级元素同一行显示

float 浮漏特

浮：浮起来，漂浮在其他标准流盒子上面

漏：加了浮动，不占位置，原来的位置就漏给了标准流的盒子

特：特别注意，首先浮动的盒子和标准流父级搭配使用，特别注意，浮动会使元素变成行内块元素

版心和布局流程

阅读报纸时容易发现，虽然报纸中的内容很多，但是经过合理地排版，版面依然清晰、易读。同样，在制作网页时，要想使页面结构清晰、有条理，也需要对网页进行“排版”。

“版心”(可视区) 是指网页中主体内容所在的区域。一般在浏览器窗口中水平居中显示，常见的宽度值为960px、980px、1000px、1200px等。

清除浮动

人生苦短，有始有终。

好比我们的浮动，有浮动开始，则就应该有浮动结束。

为什么要清除浮动

由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响，为了解决这些问题，此时就需要在该元素中清除浮动。

文字混排效果，但是现在拿来做布局，出现很多的问题。

准确的说，不是清除浮动，清除浮动后造成的影响

清除浮动本质

清除浮动的本质，解决父级元素因为自己浮动引起的内部高度为0的问题

清除浮动的方法

在CSS中，clear属性用于清除浮动，其基本语法格式如下：

选择器{clear:属性值;}

属性值	描述
left	不允许左侧有浮动元素（清除左侧浮动的影响）
right	不允许右侧有浮动元素（清除右侧浮动的影响）
both	同时清除左右两侧浮动的影响

闭合浮动，