一、处理内容溢出
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
。