前端之CSS

2022年05月14日 阅读数:8
这篇文章主要向大家介绍前端之CSS,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

                          

目录css

一.CSS是什么html

二.CSS的基本语法规范前端

三.CSS的引入方式git

1.内部样式程序员

2.内联样式浏览器

3.外部样式网络

四.CSS的基本用法工具

1.基础选择器布局

1.1 标签选择器测试

1.2 类选择器

 1.3 id选择器

 1.4 通配符选择器

2.复合选择器

2.1 后代选择器

2.2 子选择器

2.3 并集选择器

2.4 伪类选择器

 3.字体属性

3.1字体类型

3.2 字体大小

3.3字体粗细

3.4 字体样式

4.文本属性

 4.1 文本颜色

 4.2 文本对齐

4.3文本装饰 

 4.4 文本缩进

5.行高

垂直方向的水平居中

6.背景属性

6.1 背景颜色

6.2 背景图片

6.3 背景平铺

6.4 背景位置

6.5 背景尺寸

7.圆角矩形 

8.改变显示模式

 9.盒子模型

 9.1 边框

9.2 内边距 

9.3 外边距

9.4 元素的水平居中

10.弹性布局


 前面介绍了HTML的基本语法,接下来就来介绍一下CSS!!!

一.CSS是什么

CSS描述的是页面的样式,也就是描述了一个网页的元素(大小/位置/字体/颜色/背景/边框),引入CSS就是为了让页面变得更加好看,可以实现美化页面的效果,也就是咱们常常所见的美颜的效果,让页面更符合人们的审美,所以对于一个普通的程序员而言设置一个好看的页面就有些困难了,所以通常这里会有另外一个岗位"美工,设计,UED"来负责设计,这里就不详细介绍了!

二.CSS的基本语法规范

每个CSS语句包含两个部分:选择器+ 应用的属性,而css代码通常放在style里面

   <style>
        p{ 
             color: blue;      
         } 
    </style>
    <p>hello</p>

例如上面放在style里面的代码就是CSS的基本用法,外面的p就是选择器,这里就表示选择页面中的全部p标签,{}里面的是一个个键值对,就用来表示CSS里面的各类属性,通常习惯每一个键值对独占一行用;来分割一行,每一个键值对之间用:分割,里面的color是设置颜色的属性,这里就表示设置为蓝色,就会有蓝色的效果出现!!

另外再说一下,咱们这里虽然是将每一个键值对是分行写的,这是展开风格的CSS代码,可是其实在平常网页里面就会发现其实这些都被放到一行中去(也就是紧凑风格)了:

 由于若是多了一些换行,虽然咱们程序员看起来时好看了,可是这个是会让总体的CSS文件变大的,因为CSS文件都是经过网络传输给浏览器的,所以若是CSS文件大了,浏览器解析起来也是更耗费带宽的,速度也就更慢了,所以通常咱们写的时候是展开风格,而实际上这个是会经过第三方的工具自动进行替换的(前端的打包工具),这样也是就会让CSS文件变小,而后就能够加快速度了,并且不只仅CSS是这样的,JS也是这样的,这里就不过多介绍了,了解就好!!

三.CSS的引入方式

1.内部样式

这个内部样式就是和上面的基本语法规范所介绍的代码样式同样,就是放在style里面,而后再嵌套在HTML里面的任意位置,就能够实现CSS的效果了!这样作可以让页面结构和样式分离,但分离的还不够彻底,尤为是在CSS内容比较多的时候.

2.内联样式

经过style属性来指定某个标签的样式,只针对当前标签起做用,不对外部的标签其任何做用

   <p style="color: red;">
        hello world
    </p>
    <p>hi</p>

 外面的hi就不会被染成红色,而这样作的坏处就是不能写太复杂的样式,若是过于复杂就会显得特别乱,这个样式通常会搭配JS来使用!

3.外部样式

外部样式就是把css代码单独提取出去,放到一个.css文件而后在html中经过link标签来引入css文件,这样可让多个html复用同一个样式,link标签通常放在html的head标签里面,并且这个标签能够有多份,经过多个link来引入不一样的css样式,也能够实现一样的效果,这是实际开发过程当中最常使用的

<head>
    <link rel="stylesheet" href="test.css">
</head>
<body>
    <p>hi</p>
</body>

记得必定要用link标签来调用css文件,这样写样式就和结构完全分离了!! 

四.CSS的基本用法

1.基础选择器

1.1 标签选择器

对选择的全部标签都会起效,写的选择器就是一个html的标签名例如

   <style>
        p{
            
            color: #000;
        }
    </style>

选中的p就是一个html的标签,这也就是一个标签选择器

1.2 类选择器

类选择器能够选择任何想要的元素,是能够为所欲为的选择的,能够说类选择器包含了全部的选择!!

   <style>
        /* .开头的这个就是CSS中的类名 */
        .red{
            color: red;
        }
    </style> 
    <!-- 经过class属性就能够引入这个CSS类,不须要写.-->
    <p class="red">
        hello Java
    </p>
    <p class="red">
        hello C
    </p>
    <p>
        hello C++
    </p>

经过这个类选择器关联到class属性,就能够选择任何元素了

下面没有选到的也是不会被染到颜色的,所以这个类选择器也是很是的好用的!!

 1.3 id选择器

和类选择器相似,不过这个是使用id属性进行选择的,以#开头,后面带有要选择的id,另外须要给想被选中的元素设置id属性

    <style>
        /* 使用#就能够选中这个id,一个页面的id是惟一的 */
        #one{
            color: rgb(255, 0, 0);
        }
    </style>
    <p id="one">
        hello Java
    </p>
    <p>
        hello C
    </p>
    <p>
        hello C++
    </p>

id在整个页面是惟一的,所以对于id选择器来讲每次只能选择一个标签这也是和类选择的区别!

 1.4 通配符选择器

*就是这里的通配符,就直接选中了页面的全部元素,这个最大的用处就是取消掉浏览器的默认样式

    <style>
        *{
            /* 这几个属性就是默认取消掉页面的全部默认样式 */
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
    </style>
    <p id="one">
        hello Java
    </p>
    <p>
        hello C
    </p>
    <p>
        hello C++
    </p>

再看一下没有设置这个的样式:

发现差距仍是有的,中间的间距是很明显可看出来的,这也是通配符选择器的最大用处(特殊状况下会使用到这个选择器)!!

2.复合选择器

2.1 后代选择器

后代选择器,经过多个选择器的组合,选中某个元素的子/孙元素(后代元素)

<style>
        /* 后代选择器选择ul中的全部后代都设置样式,ul和li中间必定要有空格 */
        ul li{
            color: blue;
        }
         /* 后代选择,中间也要有空格,没有空格的话就是在找ul同时class为san的元素 */
        ul .san{
            color: red;
        }
         /* 孙子后代选择*/
        ul a{
            color: aqua;
        } 
    </style>
    <ul>
        <li class="san">张三</li>
        <li>
            <a href="#">李四</a>
        </li>
        <li>王五</li>
    </ul>
    <ol>
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ol>

也是有很是明显的效果,子代和孙子都是能够直接设置的,另一定要注意空格!!!

2.2 子选择器

 子选择器,经过多个选择器的组合,选中某个元素的子元素起效果,子选择器中间会有个>

<style>
        /* 子选择器 */
        ul>.san{
            color: red;
        }
        ul>a{
            color: red;
        }
    </style>
    <ul>
        <li class="san">张三</li>
        <li>
            <a href="#">李四</a>
        </li>
        <li>王五</li>
    </ul>
    <ol>
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ol>

 这里也就能够看一看出来子类能够选择成功,可是子类的子类a标签就不能选择成功了,这也就是和后代选择器的区别就是后代还能够选孙子,但子选择器不行!!!

2.3 并集选择器

并列多个选择器,能够是后代选择器,也能够是子选择器中间用,隔开

    <style>
        ul .san,
        ol>li{
            color: red;
        }
    </style>
    <ul>
        <li class="san">张三</li>
        <li>李四</li>
        <li>王五</li>
    </ul>
    <ol>
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ol>

任何的基础选择器均可以使用并集选择器来表示,并集选择器减一竖着写,每一个选择占一行

2.4 伪类选择器

这里主要介绍两个:hover鼠标悬停的时候,应用这个样式,:active鼠标按下的时候,应用这个样式

    <style>
        /*本来的样式*/
        div{
            color: #000;
        }
        /* 鼠标悬停的时候,应用这个样式  */
        div:hover{
            color: blue;
        }
        /* 鼠标按下的时候,应用这个样式 */
        div:active{
            color: red;
        }
    </style>
    <div>一个div</div>

当鼠标停留在这上面的时候:当鼠标点击的时候: 松开后又会恢复,这确实仍是一个比较有意思的样式!!!

首先CSS中的属性是很是很是多的,所以这里我只介绍一些常见的,若是碰见没有见过的属性,建议能够参考CSS参考文档边查边用!!! 

 3.字体属性

3.1字体类型

 这里的字体类型必定要在机器上有这种字体,没有的话多是加载不出来的,最好的方法是经过html中的link属性本身加载基本均可以加载出来

     <style>
        /* font-family 字体 */
       
        .one{

            font-family: "微软雅黑";
        }
        .two{
            font-family: "幼圆";
        }
    </style>
    <div class="one">
        这是一段字
    </div>
    <div class="two">
        这是另外一段字
    </div>

font-family就是字体类型的属性

这样就能够设置不用的字体样式 

3.2 字体大小

font-size就是设置字体大小的属性,这里记得必定要加单位px(像素)

    <style>
        /* font-size 大小 加px像素*/
        .one{
            font-size: 10px;
        }
        .two{
            font-size: 30px;
           
        }
    </style>
    <div class="one">
        这是一段字
    </div>
    <div class="two">
        这是另外一段字
    </div>

这个的区别仍是十分明显的,另外这个的大小也能够经过单词来设置例如small,large,normal都是能够的!! 

3.3字体粗细

font-weight字体粗细,能够用数字来设置,数字越大表示字体越粗(最大900,最小100)

       <style>
        /* font-weight字体粗细 normal是正常,bold粗体 lighter细*/
        .one{
            font-weight: lighter;
        }
        .two{
            font-weight:900;
        }
    </style>
    <div class="one">
        这是一段字
    </div>
    <div class="two">
        这是另外一段字
    </div>

并且这里的字体粗细也是能够经过单词来设置的(normal是正常,bold粗体 lighter细)

3.4 字体样式

font-style能够设置字体样式

 <style>
       
        /* font-style字体样式 italic斜体*/

        .one{
            font-style: italic;
        }
        .two{
            font-style: normal;
        }
    </style>
    <div class="one">
        这是一段字
    </div>
    <div class="two">
        这是另外一段字
    </div>

其实通常不怎么会将字体倾斜,更多的是把斜体还原回去,例如em/i这些显示出来都是斜体的,通常经过这个属性就能够将他们改回去的!! 

4.文本属性

 4.1 文本颜色

 ● 直接使用单词(样式比较少,所以不多使用)

   <style>
        /* 
           文本颜色 使用单词
        */
        
        .hh{
            color: blue;
        }
    </style>
    <div class="hh">
        这是一段话
    </div>

 ● 使用rgb(红色,绿色,蓝色)  (机器上的色光三原色,经过这些不一样的颜色混合就能够搭配出不一样的颜色,在CSS里面给这三个份量分别使用一个字节来表示0~255,这个经常使用)

    <style>
        .hh{
            color: rgb(255, 0, 0);
        }
    </style>
    <div class="hh">
        这是一段话
    </div>

 ● 使用16进制的rgb (这里不区分大小写FF和ff是同样的,并且这里是能够缩写的例如#XXYYZZ就能够缩写为#XYZ(必须三个组合都知足才能缩写))

    <style>
        .hh{
            color: #088;
        }
    </style>
    <div class="hh">
        这是一段话
    </div>

 ● 使用rgba(红色,绿色,蓝色,透明度)  (多了个份量alpha表示透明度,取值为0~1(0是最透明的,1是没有透明度的))

    <style>
        .hh{
            color: rgba(255, 0, 0, 0.3); 
        }
    </style>
    <div class="hh">
        这是一段话
    </div>

 4.2 文本对齐

text-align能够设置这个样式,lef靠左对齐,center居中,right靠右对齐(这个在前面写html表格的时候就使用到了!)

    <style>
        .one{
            text-align: left;
        }
        .two{
            text-align: center;
        }
        .three{
            text-align: right;
        }
    </style>
    <div class="one">
        这是一段字
    </div>
    <div class="two">
        这是另外一段字
    </div>
    <div class="three">
        这是又一段字
    </div>

4.3文本装饰 

经过这个text-decoration属性,能够实现下划线,删除线...(这里最主要的仍是去掉下划线)

    <style>
        a{
            text-decoration: none;
        }
        div{
            text-decoration: line-through;
        }
    </style>
    <a href="#">
        空连接
    </a>
    <div>
        这是一段话
    </div>

能够看到a标签下面的下划线已经被删除掉了,这里在开发者工具里面也是能够手动选择起效

 4.4 文本缩进

文本缩进:text-indent,默认的文本段落是不会缩进的,所以须要使用这个样式才能够

    <style>
        div{
            text-indent: 2em;
        }
    </style>
    <div>
        一段话:Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit quo unde corrupti nobis pariatur accusamus facilis consequatur nesciunt sint dignissimos, veniam dolorem eos hic molestiae fugit quia sequi reiciendis ex!
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Reprehenderit optio pariatur, eos porro perspiciatis impedit itaque voluptatem sit amet consequatur corrupti, iste ut voluptate quasi officia nisi, voluptates est quisquam.
    </div>

这里的单位可使用数字+px,可是通常会使用另外一个单位em(表示当前元素的文字大小),这个单位是很是必要的,由于有些页面是能够放大缩小字体的,不能由于放大或缩小了字体而致使页面排版出现问题,所以就得使用em单位来确认当前页面的字体大小来保证缩进,另外这个缩进的单位能够是负数的,表示反向缩进!

 

5.行高

line-height:行高=字体大小 + 行间距,对于一个文本而言有四条线,最顶部的称为顶线,最底部的称为底线 最中间的称为中线,而在底线和中线中间还有一条基线(这是英文字母中四线格中的第三条线)而一个行高就是两个文本顶线到顶线的距离,底线到底线的距离,中线到中线的距离,基线到基线的距离

    <style>
        /* 设置行高 */
        .two{
            line-height: 50px;
        }
    </style>
    <div class="one">
        上一行
    </div>    
    <div class="two">
        中间行
    </div>
    <div class="three">
        下一行
    </div>

  对比一下没有设置行高:

 能够看到设置行高时会同时对上下两个方向都会产生影响,上下领个边距都是均等的!!!

垂直方向的水平居中

又由于行高是上下均等的,所以就能够基于行高来设置文本的垂直方向居中

    <style>
        div{
            /* 设置元素的行和列  另外再设置个背景颜色(后面会介绍到这里先用一下) text-align是水平居中,line-height就是行高了(将两个都设置为居中就能够实现正中心了) */
            width: 200px;
            height: 150px;
            font-size: 20px;
            background-color: bisque;

            text-align: center;
            line-height: 150px;
        }
    </style>
    <div>
        一个div
    </div>

 

 就能够结合水平居中和垂直居中实现文本出如今元素正中心的位置上了!

这里的一个小细节:元素高度是多少就设置多高的行高就能够垂直方向居中了!!

 

6.背景属性

6.1 背景颜色

背景颜色background-color,和前面设置颜色的方法都是同样的,这就再也不介绍了,background-color设置背景颜色,color设置文字颜色(尽可能设置的不要太接近,否则会看不清楚)

    <style>
        div{
            width: 500px;
            height: 360px;
            font-size: 20px;
            background-color: bisque;
            color: #000;
        }
    </style>
    <div>
        一个div
    </div>

                           

另外还能够设置一个transparent就是继承父类的颜色,在不设置背景颜色的状况下,就会默认使用这个颜色继承body的颜色!!

6.2 背景图片

使用background-image这个属性来设置背景图片,url里面包含图片的地址

<style>
        div{
            width: 500px;
            height: 360px;
            font-size: 20px;
            background-color: bisque;
            color: #000;
            text-align: center;
            line-height: 360px;
            /* 设置背景图片 */
            background-image: url(b.jpg);
            
        }
    </style>
    <div>
        一个div
    </div>

 背景图片是默认平铺在元素内的!

6.3 背景平铺

上面的图片默认就是平铺在元素中的,那么想不让图片平铺就得使用得使用属性background-repeat来设置为图片平铺,no-repeat就是不平铺,repeat就是默认选项 repeat-x水平平铺 repeat-y垂直平铺,这里就测试一下不平铺:

    <style>
        div{
            width: 500px;
            height: 360px;
            font-size: 20px;
            background-color: bisque;
            color: #000;
            /* 设置背景图片 */

            background-image: url(b.jpg);
            /* 图片默认是平铺的,background-repeat就能够设置为图片平铺,no-repeat就是不平铺,repeat就是默认选项 repeat-x水平平铺 repeat-y垂直平铺 */
            
            background-repeat: no-repeat;
            text-align: center;
            line-height: 360px;
        }
    </style>
    <div>
        一个div
    </div>

 能够发现背景图片是覆盖背景的,所以设置的背景图片会盖住其位置的背景颜色,而文本又是在背景图片上面的,不会被覆盖!

6.4 背景位置

想改变背景图片的位置,就须要background-position来设置,使用数字+px来设置也是能够的,可是若是想居中的话就须要本身计算,所以想设置到中间的话可使用百分比或者单词的形式来设置

<style>
        div{
            width: 500px;
            height: 360px;
            font-size: 20px;
            background-color: bisque;
            color: #000;

            /* 设置背景图片 */
            background-image: url(b.jpg);
            
            background-repeat: no-repeat;
            
           
            /* 坐标位置 */
            background-position: 50% 50%;
            /* background-position: center center; */

            text-align: center;
            line-height: 360px;
        }
    </style>
    <div>
        一个div
    </div>

 能够发现图片已经放到了正中间!

6.5 背景尺寸

又发现上面的背景图片的大小是远小于元素的大小的,所以使用background-size属性来设置 背景大小,可使用数字加px直接设置,另外也能够直接使用英文单词来设置(contain(把图片拉伸到元素大小就结束了,保证背景图始终在元素内) 和 cover(会把元素所有覆盖)都是自适应的)

   <style>
        div{
            width: 500px;
            height: 360px;
            font-size: 20px;
            background-color: bisque;
            color: #000;
            /* 设置背景图片 */

            background-image: url(b.jpg);
            
            background-repeat: no-repeat;
         
            background-position: 50% 50%;
            
          
            background-size: contain; 


            text-align: center;
            line-height: 360px;
        }
    </style>
    <div>
        一个div
    </div>

  总结一下:background这一系列属性对于图片的处理能力是要强于image的处理能力的,所以在实际开发中background会更经常使用一些!!!

7.圆角矩形 

HTML里面的元素都是默认矩形的,而想要设置的圆滑一些更好看一些就要经过border-radius来设置其圆角:

     <style>
        /* 这里border-radius的取值更像是这个矩形的切圆的半径同样,半径越大,就会越圆一些 */
        div{
            width: 400px;
            height: 200px;
            background-color: bisque;
            color: black;
            
            border-radius: 50px;
            line-height: 200px;
            text-align: center;
        }

    </style>
    <div>
        一个div
    </div>

 经过手动调节这个也能够的

而经过这个就能够设置成一个圆形(将这个设置为宽度的一半就能够了),并且要是不想写数字的,仍是能够写百分比的

    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: bisque;
            color: black;
            
            border-radius: 100px;
            line-height: 200px;
            text-align: center;
        }

    </style>
    <div>
        一个div
    </div>

另外这也能够分开四个角来写,分别设置四个角:

     <style>
        div{
            width: 400px;
            height: 200px;
            background-color: bisque;
            color: black;
            
            line-height: 200px;
            text-align: center;
            /*能够分开四个角分别写 */
            border-top-left-radius: 50%;
            border-top-right-radius: 50%;
            border-bottom-left-radius: 50%;
            border-bottom-right-radius: 50%; 
            /* 也能够按照四个角的顺序依次写在border-radius里面 */

        }

    </style>
    <div>
        一个div
    </div>

 这个就不过多介绍了!!

 

8.改变显示模式

块级元素(div,p,h1-h6),行内元素(a,span不能设置宽和高),行内块元素(input,img不独占一行,可是能设置宽和高),而块级元素都是独占一行的,有时候斯须要将几个块级元素放在一行的,该怎么作呢?  经过display能够把行内元素设置块级元素,块级元素设置为行内元素

   <style>
        a{
            width: 60px;
            height: 100px;
            display: block;          
        }
    </style>
    <a href="#">空连接1</a>
    <a href="#">空连接2</a>
    <a href="#">空连接3</a>

   能够发现行内元素已经变成块级元素了

另外display还有一个特殊的选项设置为none就可让选中的元素隐藏起来,这个就不演示了,感兴趣的能够本身去设置一下!!

 9.盒子模型

HTML的元素实际上是由这几个部分构成的 margin外边距(就像是房子和其余房子的距离) border边框(至关于房子的外墙) padding内边距(至关于家中的东西距离墙的距离),而后最里面的就是具体的内容了

 9.1 边框

    <style>
        div{
            width: 200px;
            height: 200px;
            background-color:bisque;
            /* 2px大小的边框,颜色为黑色,且是实心的(边框样式也是有不少种的,border-style能够查到) */
            border: 2px black solid;
            
        }
    </style>
    <div class="one">
        一个div
    </div>    
   

                     

 而经过开发者工具查看发现设置一个边框是会撑大原有元素的尺寸的,这个就有可能会出现问题的(有可能就致使元素尺寸改变,进一步就影响到页面布局了),所以在实际的开发过程是将box-sizing设置为border-box此时的设置的边框就会挤压内容而不会撑大元素!!

    <style>
        div{
            width: 200px;
            height: 200px;
            background-color:bisque;
            /* 2px大小的边框,颜色为黑色,且是实心的(边框样式也是有不少种的,border-style能够查到) */
            border: 2px black solid;
            box-sizing: border-box;

        }
    </style>
    <div class="one">
        一个div
    </div>    
   

 此时就是挤压本身元素的大小了而不是用外面的空间了

9.2 内边距 

 里面的内容和边框的距离经过padding来设置

    <style>
        div{
            width: 200px;
            height: 200px;
            background-color:bisque;
            /* 2px大小的边框,颜色为黑色,且是实心的(边框样式也是有不少种的,border-style能够查到) */
            border: 2px black solid;
            box-sizing: border-box;
            padding: 20px;

        }
    </style>
    <div class="one">
        一个div
    </div>    
   

就会发现里面的内容距离边框就会远了,这里设置的比较大,是为了效果更明显!

9.3 外边距

 经过margin属性来设置

    <style>
        div{
            width: 200px;
            height: 200px;
            background-color:bisque;
          
            border: 2px black solid;
            box-sizing: border-box;
            padding: 20px;
        }
        .one{
            margin-bottom: 10px;
        } 
        .two{
            margin-top: 20px;
        }
    </style>
    <div class="one">
        一个div
    </div>    
    <div class="two">
        一个div
    </div>

使用开发者工具查看发现外边距并非两个外边距相加起来的,而是重叠了,这里就须要注意外边距在垂直方向是会存在"塌陷"的状况的,二者都设置了外边距,这里的外边距是不会累加的,而是会重叠,取其最大值,可是在(内边距)水平方向是会相加的!!

9.4 元素的水平居中

这里基于margin还能够实现元素的水平居中(不是文本)

      <style>
         .one{
             width: 400px;
             height: 200px;
             background-color:bisque;
         }
         .two{
             height: 50px;
             width: 100px;
             background-color: aquamarine;
             /* 想要让这个块级元素处在中间位置 0表示上下外边距为0,auto表示左右外边距自适应(水平居中)*/
             margin: 0 auto;
         }
     </style>
     <div class="one">
        <div class="two">
            hello
        </div>
    </div>    

 就可让这个块内元素水平居中了,可是垂直方向上的经过margin设置仍是不行的,这个就不介绍了!!

10.弹性布局

弹性布局主要是安排页面上的元素的位置(排列方式) ,实际上盒子模型的外边距就影响到了元素和元素之间的布局,但这还不够,弹性布局就是强化这一点的,默认的网页布局是从上到下的,而实际的网页则是既有从上到下,还有从左到右,所以就得使用到弹性布局

    <style>
        .parent{
            /* width: 100%表示继承body的宽度  */
            width: 100%;
            height: 200px;
            background-color: bisque;
            
            /* div是独占一行的,而想要让子元素的div在父元素中水平排列就得用到弹性布局 给父元素设置一个属性 display: flex,就能够了 */
            display: flex;
        
        }
        .one{
            width: 100px;
            height: 100px;
            background-color: aquamarine;
        }
    </style>
    <div class="parent">
        <div class="one">1</div>
        <div class="one">2</div>
        <div class="one">3</div>
        <div class="one">4</div>

    </div>

->

 能够看出来使用了弹性布局以后块级元素也能够水平放置了!

默认这些元素的排列方式是在左上角的,而想要改变排列方式就得使用另外一个属性,水平方向:justify-content,start表示靠左排列,end表示靠右排列,center表示居中排列 space-between表示让元素之间有均匀的间隔 space-around表示除中间外左右也有间隔

    <style>
        .parent{
            /* width: 100%表示继承body的宽度  */
            width: 100%;
            height: 200px;
            background-color: bisque;
            
            /* div是独占一行的,而想要让子元素的div在父元素中水平排列就得用到弹性布局 给父元素设置一个属性 display: flex,就能够了 */
            display: flex;
            justify-content: space-around;
        }
        .one{
            width: 100px;
            height: 100px;
            background-color: aquamarine;
        }
    </style>
    <div class="parent">
        <div class="one">1</div>
        <div class="one">2</div>
        <div class="one">3</div>
        <div class="one">4</div>

    </div>

 

 能够发现效果仍是很明显的!!

另外垂直方向也是和水平方向同样的,属性是align-items就直接使用了

     <style>
        .parent{

            width: 100%;
            height: 200px;
            background-color: bisque;
          
            display: flex;
           
            justify-content: space-around;
            
            /* 垂直方向也是同样的设置方式  最经常使用的仍是放在中间*/
            align-items: center;
        }
        .one{
            width: 100px;
            height: 100px;
            background-color: aquamarine;
        }
    </style>
    <div class="parent">
        <div class="one">1</div>
        <div class="one">2</div>
        <div class="one">3</div>
        <div class="one">4</div>

    </div>

 就能够将其元素放在中间了,弹性布局也是十分好用的!!!

 好了介绍到这里基本的CSS样式就介绍的差很少了,这里的样式仍是不少的,不过这里的样式也只是一些经常使用的,还有不少样式是没有介绍到的,所以想要使用的话能够在CSS参考文档里面查找使用!!