CSS基础

39 阅读3分钟

盒模型

1

默认为box-sizing: content-box,即设置div标签width和height时,是只设置给content的

而使用box-sizing: border-box后,width和height包括了:border + padding + content

//html
<div id="test">
        content
</div>

//css
#test {
     box-sizing: border-box;
     width: 500px;    //border + padding + content == 500px
     height: 500px;   //border + padding + content == 500px
     margin: 30px;
     padding: 30px;
     border: 10px solid;
     color: black;
     /* 边框颜色默认与字体颜色相同 */
     background-color: red;
     border-radius: 20px;    
     /* 边框圆角 */
     border-top-left-radius: 40px;
     /* 左上边框圆角 */
     border-bottom-right-radius: 50px;
     /* 右下边框圆角 */
     box-shadow: 100px -20px 3px 20px green;
    /* 阴影:向右移动100px,向上移动20px,模糊3px,散开20px(阴影区域大小),绿色 */
}

image.png

(border不知道为什么不是10px)

image.png

2

display:inline特殊之处:

1.设置width和height无效 2.设置margin上下无效

//html
//注意标签换行有空格
<span id="test">test</span>
<span>66666</span>

//css
#test {
      width: 100000px;
      height: 1000000px;
      margin: 10px;
      padding: 10px;
      border: 2px solid;
}

image.png

//html
<div>1</div>
<span id="test">test</span>
<span>66666</span>

image.png

上图可知display:inline的上下margin无效

juejin.cn/post/711794…

3

margin重叠的三种情况:都是取大的margin

父子

//html
<div class="item1">
        <div class="item2"></div>
</div>

//css
.item1 {
      background-color: red;
      width: 300px;
      height: 300px;
      margin-top: 90px;
}
.item2 {
     background-color: yellow;
     width: 100px;
     height: 100px;
     margin-top: 100px; //二者margin100px
}

兄弟

//html
<div class="item1"></div>
<div class="item2"></div>
//css
.item1 {
     background-color: red;
     width: 300px;
     height: 300px;
     margin-bottom: 90px;   //最后的效果是下面的100px
}
.item2 {
     background-color: yellow;
     margin-top: 100px;
     width: 100px;
     height: 100px;
}

非兄弟、父子

//html
<div>
    <div class="item1"></div>
</div>
<div>
    <div class="item2"></div>
</div>
//css
.item1 {
     width: 100px;
     height: 100px;
     background-color: red;
     margin-bottom: 100px;   //取这里的100,而不是下面的50
}
.item2 {
    margin-top: 50px;
    width: 100px;
    height: 100px;
    background-color: yellow;
}

4、BFC

juejin.cn/post/720396…

float属性

float:left/right:脱离文档流,父元素塌陷

flex布局

flexboxfroggy.com/#zh-cn

codepip.com/

开启flex布局

.father {
    display: flex;
    justify-content: center;    //子元素横向居中
    align-items: center;    //子元素纵向居中
}

justify-content和align-items

justify-content: flex-start:子元素挤到start
                center
                flex-end:子元素挤到end
                space-between:首尾子元素紧挨父级,子元素间均匀
                space-around:首尾子元素间隔父级a,子元素间间隔a/2
                space-evenly:子元素和父元素均匀间隔
align-items: flex-start/center/flex-end...

align-self

控制单个子元素在垂直方向上的排列,与align-items的区别就是前者控制单个,后者控制所有子元素

//html
<div class="father">
     <div class="item">1</div>
     <div class="item test">2</div>
     <div class="item">3</div>
     <div class="item">4</div>
</div>    
//css
.father {
      display: flex;
      width: 500px;
      height: 500px;
      background-color: red;
       align-items: flex-start;
}
.item {
      width: 100px;
      height: 100px;
      background-color: yellow;
}
.test { 
      align-self: flex-end;
}

image.png

flex-direction

值:row(默认)/row-reverse/column/column-reverse

使用reverse后start和end调换,注意使用justify-centent和align-items的效果 使用column后,justify-content控制纵向,align-items控制横向 justify-content始终控制的是当前的方向,而align-items是控制的是垂直当前方向的方向

order

控制单个子元素相对于其他子元素的顺序,其他子元素看做整体

image.png

给2设置:order:1;(默认为0)

image.png

flex-wrap

取值:nowrap(默认)/wrap/wrap-reverse
//html
<div class="father">
   <div class="item">1</div>
   <div class="item">2</div>
   <div class="item">3</div>
   <div class="item">4</div>
   <div class="item">5</div>
   <div class="item">6</div>
   <div class="item">7</div>
   <div class="item">8</div>
   <div class="item">9</div>
   <div class="item">10</div>
   <div class="item">11</div>
</div>
//css
.father {
            display: flex;
            width: 500px;
            height: 500px;
            background-color: red;
            flex-wrap: wrap;   //不加这一行的话,子元素全部挤在一行
}
.item {
    width: 100px;
    height: 100px;
    background-color: yellow;
}

image.png

wrap时,将容器均分为三部分,然后每一行从每一个均分的部分开始排列。 wrap-reverse是从反方向开始换行

image.png

flex-flow

flex-direction和flex-wrap的结合,如flex-flow:column wrap等于flex-direction: column; flex-wrap: wrap;

align-content

取值:flex-start/center/flex-end/space-between/space-around/space-evenly

换行后,行与行之间会有间距,用align-content决定行间距。在wrap后,在父级中加入:align-content:flex-start

image.png

position