CSS 笔记

 目录

 选择器

伪类选择器

通用选择器

颜色

字体

边框

盒子模型

 box-sizing

 状态

 浮动 float

 定位 position

 相对定位 relative

绝对定位 absolute

 固定定位 fixed

 弹性布局 flex

flex-basis

flex-grow

flex

flex-direction：row（默认值）

align-items：stretch(默认值）

 justify-content：flex-start(默认值）

flex-wrap：nowrap（默认值）

align-content：stretch（默认值）

 学习代码

html

css

---

选择器

 <p class="paragraph" id="para1">Lorem</p>
 p{
    color:red;
 }
 .paragraph{
    color:red;
 }
 #para1{
    color:red;
 }

在一个html文件中 需要确保id是独一无二的，class没有这种要求

伪类选择器

        <ul class="list2">
            <li>list Item</li>
            <li>list Item</li>
            <li>list Item</li>
            <li>list Item</li>
            <li>list Item</li>
            <li>list Item</li>
            <li>list Item</li>
            <li>list Item</li>
            <li>list Item</li>
        </ul>
/*  even 复数  */
.list2 li:nth-child(even){ 
    background-color: grey;
}

.list2 li:first-child{
    background-color: red;
}

.list2 li:nth-child(3){
    color: aqua;
}

通用选择器

*{
    border：1px solid;
}

颜色

rgba（255，0，0，0.5）
a:透明度 0-1取值 0代表完全透明 1代表完全不透明

字体

    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    /* 字重 */
    font-weight: normal;

    /* 等价于 */
    font: bold 16px Arial, Helvetica, sans-serif;

font- family: Arial, Helvetica, sans- serif;有三个值 优先级 若第一个找不到 则使用第二个

sans-serif 无衬线 ；相反地，serif有衬线

monospace：等宽字体

边框

border的value顺序可颠倒 例如：border-right: 5px red solid     或者     border:5px dotted #ccc

盒子模型

当两个盒子靠在一起时 他们之间的外边距只会取最大的值 如下所示 左图错误 右图正确 外边距塌陷（术语）

p{
    /* margin-top,margin-bottom:5px;margin-left,margin-right: 10px*/
    margin:5px 10px;
}

p{    /* margin-top:5px;margin-left,margin-right:10px,margin-bottom:5px*/
    margin:5px 10px 5px;
}

 box-sizing

 css3中box-sizing下的盒子模型

语法：（属性）box-sizing: （属性值）content-box/border-box/inherit；
（1）当“box-sizing“的值为”content-box“时，css中的width所包含的部分是盒子模型中content的宽度。此时和标准盒子模型表现一致。

（2）当“box-sizing“的值为”border-box“时，css中的width所包含的是盒子模型中的content的宽度+padding+border的宽度。此时和怪异盒子模型的表现一致。

总结：box-sizing属性，让开发人员可以控制浏览器的是以标准盒子模型表现，还是以怪异盒子模型表现。

 状态

:hover 鼠标移入
:active 鼠标点击
:visited 访问过 （只有a TAG 才有）

 浮动 float

在使用完float布局后，需要清除float

<div class="block">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci pariatur doloribus, ipsa obcaecati blanditiis, omnis quae cupiditate, reiciendis dolores fuga ad et animi. Nulla tempora nemo laborum sapiente et provident!</p>
</div>
<div class="clearfix"></div>
.clearfix{
    clear: both;
}

 定位 position

 相对定位 relative

是以没有进行相对定位的位置进行偏移

.box2{
    border:5px dotted #ccc;
    border-radius: 35px;
    padding:20px;
    margin:20px 0;
    position: relative;
    top: 300px;
    left: 30px;
}

绝对定位 absolute

absolute在没有上下文relative时，是参考当前视窗页面进行偏移

本来的位置不会保留，完全处于浮动状态

.box2{
    border:5px dotted #ccc;
    border-radius: 35px;
    padding:20px;
    margin:20px 0;
    position: absolute;
    top: 300px;
    left: 30px;
}

 固定定位 fixed

无论你的窗口如何滚动 他相对于视窗的位置不变

<button id="fixed">Button</button>
#fixed{
    position: fixed;
    right: 0;
    bottom: 0;
}

 

 弹性布局 flex

flex-basis

元素的大小 与width不同的是 会保证其他元素的可读 其他元素的最小宽度是min-content

flex-grow

元素大小相对于其他元素的倍数；若只有一个元素设置了flex-grow：1，则独享其他元素剩余的空间

flex

 相当于flex：（flex-grow，flex-shrink，flex-basis)

flex：1相当于 flex：1，1，auto

flex-direction：row（默认值）

flex-direction属性决定主轴的方向（即项目的排列方向）。

.box {

flex-direction: row | row-reverse | column | column-reverse;

}

• row（默认值）：主轴为水平方向，起点在左端（项目从左往右排列）。
• row-reverse：主轴为水平方向，起点在右端（项目从右往左排列）。
• column：主轴为垂直方向，起点在上沿（项目从上往下排列）。
• column-reverse：主轴为垂直方向，起点在下沿（项目从下往上排列）。

 

align-items：stretch(默认值）

align-items属性定义项目在交叉轴上如何对齐。纵向交叉轴始终自上而下，横向交叉轴始终自左而右

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

• flex-start：交叉轴的起点对齐。
• flex-end：交叉轴的终点对齐。
• center：交叉轴的中点对齐。
• baseline: 项目的第一行文字的基线对齐。
• stretch（默认值）：如果项目未设置高度或设为auto，项目将占满整个容器的高度。

 

 justify-content：flex-start(默认值）

justify-content属性定义了项目在主轴上的对齐方式。

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

• flex-start（默认）：与主轴的起点对齐。
• flex-end：与主轴的终点对齐。
• center：与主轴的中点对齐。
• space-between：两端对齐主轴的起点与终点，项目之间的间隔都相等。
• space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

flex-wrap：nowrap（默认值）

默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，该如何换行。

.box{

flex-wrap: nowrap | wrap | wrap-reverse;

}

• nowrap（默认）：不换行（列）。
• wrap：主轴为横向时：从上到下换行。主轴为纵向时：从左到右换列。
• wrap-reverse：主轴为横向时：从下到上换行。主轴为纵向时：从右到左换列。

注意：换行（列）时，项目还按照主轴方向排列

 

align-content：stretch（默认值）

.box {

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

}

• flex-start：与交叉轴的起点对齐。
• flex-end：与交叉轴的终点对齐。
• center：与交叉轴的中点对齐。
• space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
• space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
• stretch（默认值）：主轴线占满整个交叉轴。

 

 学习代码

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" href="./css/style.css">
    <title>CSS Crash Course</title>
</head>
<body>
    <div class="container">
        <div class="box1">    
        <h1>Hello World</h1>
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Veniam possimus aliquam enim nesciunt eum ducimus excepturi, voluptatum accusantium quaerat maxime non, et consequuntur beatae iste vitae recusandae deserunt commodi nihil eos veritatis, suscipit pariatur ut! Voluptatum repellendus aspernatur veritatis alias libero exercitationem, voluptatem quas et. Expedita tempore, corrupti officia alias labore, consequatur ab aut incidunt maiores perferendis dolor ex culpa modi sapiente. Temporibus deleniti, animi reiciendis iusto, illum recusandae dolores minus mollitia unde sapiente modi id maxime atque accusantium blanditiis, assumenda soluta eos reprehenderit vitae quam explicabo et. Impedit minima fugit consequatur totam aliquam neque nihil doloribus magni quo quae.
            </p>
            <button>Button</button>
        </div>
        <div class="box2">    
            <h1>Hello World</h1>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Veniam possimus aliquam enim nesciunt eum ducimus excepturi, voluptatum accusantium quaerat maxime non, et consequuntur beatae iste vitae recusandae deserunt commodi nihil eos veritatis, suscipit pariatur ut! Voluptatum repellendus aspernatur veritatis alias libero exercitationem, voluptatem quas et. Expedita tempore, corrupti officia alias labore, consequatur ab aut incidunt maiores perferendis dolor ex culpa modi sapiente. Temporibus deleniti, animi reiciendis iusto, illum recusandae dolores minus mollitia unde sapiente modi id maxime atque accusantium blanditiis, assumenda soluta eos reprehenderit vitae quam explicabo et. Impedit minima fugit consequatur totam aliquam neque nihil doloribus magni quo quae.
                </p>
                <button>Button</button>
        </div>
        <div class="list">
            <ul>
                <li><a href='#'>list1</a></li>
                <li><a href='123.abc'>list2</a></li>
                <li><a href='#'>list3</a></li>
                <li><a href='#'>list4</a></li>
                <li><a href='#'>list5</a></li>
            </ul>
        </div>
        <div class="block">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci pariatur doloribus, ipsa obcaecati blanditiis, omnis quae cupiditate, reiciendis dolores fuga ad et animi. Nulla tempora nemo laborum sapiente et provident!</p>
        </div>
        <div class="block">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci pariatur doloribus, ipsa obcaecati blanditiis, omnis quae cupiditate, reiciendis dolores fuga ad et animi. Nulla tempora nemo laborum sapiente et provident!</p>
        </div>
        <div class="block">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci pariatur doloribus, ipsa obcaecati blanditiis, omnis quae cupiditate, reiciendis dolores fuga ad et animi. Nulla tempora nemo laborum sapiente et provident!</p>
        </div>
        <div class="clearfix"></div>
        <div id="main-block">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur quidem expedita quam nulla deleniti illo incidunt, optio praesentium maiores labore, atque, molestiae qui odio debitis repellat error fugit asperiores est!</p>
        </div>
        <div id="siderbar">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur quidem expedita quam nulla deleniti illo incidunt, optio praesentium maiores labore, atque, molestiae qui odio debitis repellat error fugit asperiores est!</p>
        </div>
        <div class="clearfix"></div>
        <ul class="list2">
            <li>list Item</li>
            <li>list Item</li>
            <li>list Item</li>
            <li>list Item</li>
            <li>list Item</li>
            <li>list Item</li>
            <li>list Item</li>
            <li>list Item</li>
            <li>list Item</li>
        </ul>
        <div class="position-box">
            <h1>Heading1</h1>
            <h2>Heading2</h2>
        </div>

        <button id="fixed">Button</button>
    </div>
<div class="container1" style="margin-top: 100px;">
    <div class="item">item 1111111111111</div>
    <div class="item">item 2</div>
    <div class="item">item 3</div>
    <div class="item">
        item 4<br/>
        item 4<br/>
        item 4<br/>
    </div>
    <div class="item">item 5</div>

</div>

</body>
</html>

css

body{
    background-color: #f4f4f4;
    color: #555555;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    /* 字重 */
    font-weight: normal;

    font: bold 16px Arial, Helvetica, sans-serif;
    /* 行高 */
    line-height: 1.5em;
}

button{
    background-color: #444;
    color:#fff;
    padding: 10px 15px;
}

button:hover{
    background-color: red;
}

button:active{
    background-color: #fff;
}

a{
    text-decoration: none;
    color: #555;
}

a:hover{
    color: cyan;
}

a:visited{
    color: red;
}

.clearfix{
    clear: both;
}

.box1{
    background-color: antiquewhite;
    color: royalblue;
    border: 5px blue solid;
    border-right: 5px red solid;
    border-top: 10px green dotted;
    border-left: 8px blue solid;
    border-bottom: 1px firebrick double;

    border-bottom-width: 8px;
    border-bottom-style: dashed;

    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;

    margin-top: 20px;
}
.box1 h1{
    font-family: 'Times New Roman', Times, serif;
    font-weight: 800;
    font-style: italic;
    /* 文本修饰 */
    text-decoration:underline;
    /* 大小写 */
    text-transform: uppercase;
    /* 字间距 */
    letter-spacing: 1em;
    /* 词间距 */
    word-spacing: 2em;
}

.box2{
    border:5px dotted #ccc;
    border-radius: 35px;
    padding:20px;
    margin:20px 0;
    position: absolute;
    top: 300px;
    left: 30px;
}

.box2 h1{
    /* 居中 */
    text-align: center;
}

.container{
    width: 80%;
    /* 水平居中 */
    margin:auto 
}

.list li{
    list-style-image: url('../image/check.jpg');
    /* 变成方块 */
    list-style: square;
}

.block{
    float: left;
    width: 33.3%;
    border:1px solid #ccc;
    /* 有边框的盒子 */
    /* 
    （1）当“box-sizing“的值为”content-box“时，css中的width所包含的部分是盒子模型中content的宽度。此时和标准盒子模型表现一致。

    （2）当“box-sizing“的值为”border-box“时，css中的width所包含的是盒子模型中的content的宽度+padding+border的宽度。此时和怪异盒子模型的表现一致。

    总结：box-sizing属性，让开发人员可以控制浏览器的是以标准盒子模型表现，还是以怪异盒子模型表现。 
*/
    box-sizing: border-box;
}

#main-block{
    float: left;
    width: 70%;
    border:1px solid #ccc;
    box-sizing: border-box;

}

#siderbar{
    float:right;
    width: 30%;
    border:1px solid #ccc;
    box-sizing: border-box;
}

.list2 li:nth-child(even){
    background-color: grey;
}

.list2 li:first-child{
    background-color: red;
}

.list2 li:nth-child(3){
    color: aqua;
}

.position-box{
    width: 500px;
    height: 500px;
    border: 1px solid black;
    position: relative
}

.position-box h1{
    position:absolute;
    top: 50px;
}
.position-box h2{
    position:absolute;
    left: 30px;
}

#fixed{
    position: fixed;
    right: 0;
    bottom: 0;
}
*{
    border:1px solid
}

.container1{
    display: flex;
}

.item{
    width: max-content;
}