CSS盒子模型(三)

一、处理内容溢出

CSS 属性名
功能
属性值
overflow
溢出内容的处理方式
visible :显示,默认值
hidden :隐藏
scroll :显示滚动条,不论内容是否溢出
auto :自动显示滚动条,内容不溢出不显
overflow - x
水平方向溢出内容的处理方式
overflow
overflow - y
垂直方向溢出内容给的处理方式
overflow
注意:
1. overflow - x overflow - y 不能一个是 hidden ,一个是 visible ,是实验性属性,不建议使用。
2. overflow 常用的值是 hidden auto ,除了能处理溢出的显示方式,还可以解决很多疑难杂症

二、 隐藏元素的方式

方式一:visibility 属性

visibility 属性默认值是 show ,如果设置为 hidden ,元素会隐藏。
元素看不见了,还占有原来的位置(元素的大小依然保持)

方式二: display 属性

设置 display:none ,就可以让元素隐藏。
彻底地隐藏,不但看不见,也不占用任何位置,没有大小宽高。

三、样式的继承  

有些样式会继承,元素如果本身设置了某个样式,就使用本身设置的样式;但如果本身没有设置某个样式,会从父元素开始一级一级继承(优先继承离得近的祖先元素)。

会继承的 css 属性

字体属性、文本属性(除了vertical-align)、文字颜色 等。  

不会继承的 css 属性  

边框、背景、内边距、外边距、宽高、溢出方式 等。 

一个规律:能继承的属性,都是不影响布局的,简单说:都是和盒子模型没关系的。

四、默认样式  

元素一般都些默认的样式,例如:
1. <a> 元素:下划线、字体颜色、鼠标小手。
2. <h1> ~ <h6> 元素: 文字加粗、文字大小、上下外边距。
3. <p> 元素:上下外边距
4. <ul> ol 元素:左内边距
5. body 元素: 8px 外边距( 4 个方向)
......
优先级: 元素的默认样式 > 继承的样式 ,所以如果要重置元素的默认样式,选择器一定要直接选择器到该元素。

五、布局小技巧

1. 行内元素、行内块元素,可以被父元素当做文本处理。

即:可以像处理文本对齐一样,去处理:行内、行内块在父元素中的对齐。
例如: text - align line - height text - indent 等。

2. 如何让子元素,在父亲中 水平居中

  •  若子元素为块元素,给父元素加上: margin:0 auto;
  • 若子元素为 行内元素 行内块元素 ,给父元素加上: text - align:center

3. 如何让子元素,在父亲中 垂直居中

  • 若子元素为块元素,给子元素加上: margin-top ,值为:(父元素 content -子元素盒子总高) / 2
  • 若子元素为 行内元素 行内块元素 :让父元素的 height = line - height ,每个子元素都加上: vertical-align:middle ;
补充:若想绝对垂直居中,父元素 font - size 设置为 0

六、元素之间的空白问题

产生的原因:

行内元素、行内块元素,彼此之间的换行会被浏览器解析为一个空白字符。

解决方案:

1. 方案一: 去掉换行和空格(不推荐)。
2. 方案二: 给父元素设置 font - size:0 ,再给需要显示文字的元素,单独设置字体大小(推荐)。

七、行内块的幽灵空白问题

产生原因:

行内块元素与文本的基线对齐,而文本的基线与文本最底端之间是有一定距离的。

解决方案:

1. 方案一: 给行行内块设置 vertical ,值不为 baseline 即可,设置为 middel bottom top 均可。
2. 方案二: 若父元素中只有一张图片,设置图片为 display:block
3. 方案三: 给父元素设置 font - size: 0 。如果该行内块内部还有文本,则需单独设置 font -size

猜你喜欢

转载自blog.csdn.net/lvshihao_/article/details/141389847