CSS常见样式-上
2017-08-21 本文已影响0人
cccccccc7355608
| 块级元素(block-level) | 行内元素(内联、inline-level) |
|---|---|
| 可以包含块级和行内 | 只能包含文本和行内 |
| 占据一整行空间 | 占据自身宽度空间 |
| 设置宽高会生效 | 设置宽高会无效 |
| 设置内外边距生效 | 设置内外边距左右方向生效，上下会失效 （视觉上上下方向会被撑开，上下边框的位置会受影响， 但不会影响元素实际高度） |
- block-level
div h1 h2 h3 h4 h5 h6 p hr form ul dl ol pre table li dd dt tr td th - inline-level
em strong span a br img button input label select textarea code script
css继承
子元素会继承父元素的某些css属性
一、 不可继承的属性
display- 文本属性
vertical-align text-decoration text-shadow white-space unicode-bidi - 盒模型属性
width height margin margin-top margin-right margin-bottom margin-left border border-style border-top-style border-right-style border-bottom-style border-left-style border-width border-top-width border-right-right border-bottom-width border-left-width border-color border-top-color border-right-color border-bottom-color border-left-color border-top border-right border-bottom border-left padding padding-top padding-right padding-bottom padding-left - 背景属性
background background-color background-image background-repeat background-position background-attachment - 定位属性
float clear position top right bottom left min-width min-height max-width max-height overflow clip z-index - 生成内容属性
content counter-reset counter-increment - 轮廓样式属性
outline-style outline-width outline-color outline - 页面样式属性
size page-break-before page-break-after - 声音样式属性
pause-before pause-after pause cue-before cue-after cue play-during
二、可继承的属性
- 字体属性
font font-family font-weight font-size font-style font-variant font-stretch font-size-adjust - 文本属性
text-indent text-align line-height word-spacing letter-spacing text-transform direction color - 元素可见属性
visibility - 表格布局属性
caption-side border-collapse border-spacing empty-cells table-layout - 列表布局属性
list-style-type list-style-image list-style-position list-style - 生成内容属性
quotes - 光标属性
cursor - 页面样式属性
page page-break-inside windows orphans - 声音样式属性
speak speak-punctuation speak-numeral speak-header speech-rate volume voice-family pitch pitch-range stress richness azimuth elevation
水平居中
- 块级元素
margin: 0 auto; - 行内元素
text-align: center;
CSS实现三角形
利用border，宽高设置为0，用四个方向的border实现三角形
<style>
.box {
height: 0;
width: 0;
border-top: solid 30px red;
border-right: solid 30px green;
border-bottom: solid 30px yellow;
border-left: solid 30px blue;
}
</style>
<div class="box"></div>
单行文本溢出加...
white-space: nowrap;
overflow: hidden;
text-overflow: elliapse;
px、em、rem区别
| px | em | rem | |
|---|---|---|---|
| 区别 | 固定单位，设置后，字体大小为设置的值 | 相对单位，相对于父元素字体大小 | 相对单位，相对于根元素(html)字体大小 |
