display属性¶
有这些值:block、inline、flex、inline-flex
block 声明元素为块级,会换行
inline 声明元素为行内,不会换行
flex 声明该元素内的元素为flex, 但是自己本身还是会换行
inline-flex 则是声明该元素内的元素为flex,并且自己不换行
inline-block
样式具有优先级¶
选择范围更小的优先级更高,如 #id > .class > h
x¶
以下内容表示,浏览器宽度大于30em时会起作用
@media (min-width: 30em) {
body {
background-color: blue;
}
}
元素的宽度和高度¶
元素由margin、padding、border、contnet组成,默认情况下,设置的width和height都是指content的宽高(即box-sizing: content-box;
)。如果需要设置的宽高包括margin、padding、border,可以设置属性box-sizing: border-box;
。width和height对display:block有效,对display:inline无效。要保持inline,但是又要宽高可以设置,可以这样display:inline-block。
before和after¶
经常看到这样的写法::before :: after
,这是什么意思。
其实就是在前面或者后面插入内容。
<p class="box">Content in the box in my HTML page.</p>
.box::before {
content: "This should show before the other content."
}
//页面显示 This should show before the other content.Content in the box in my HTML page.
<p class="box">Content in the box in my HTML page.</p>
.box::after {
content: "This should show before the other content."
}
//页面显示 Content in the box in my HTML page.This should show before the other content.
上面的例子,现实情况一般不会这样做。这些伪元素的更推荐的用法是插入一个图标,作为一个视觉性的提示,而且我们并不希望屏幕阅读器读出它。
.box::after {
content: " ➥"
}
边距¶
值为正时推开,让其他元素让出空间。值为负时收缩自身空间。不能有负数量的内边距。
.x{
margin:10px; //推开
margin:-10px; //收缩
}
flex布局¶
父元素上flex-direction
的初值是row
。
父元素上align-items
属性的初值是stretch
。(子元素的高度拉伸至flex容器高度)
宽度占满如下:
.wrapper{
display: flex;
}
/* >号表示.warpper的第一代子元素(第一层) */
.wrapper > div{
background-color:aquamarine;
flex: 1; /* 横向占满 每个元素占比例是1,如果有三个元素,则每个占3分之1*/
}