跳转至

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*/
}