CSS3弹性盒子，CSS移动端适配，CSS媒体查询，CSS文本域，CSS多列布局，CSS选择器

最新推荐文章于 2024-08-16 08:15:00 发布

进击的小野马

最新推荐文章于 2024-08-16 08:15:00 发布

阅读量372

点赞数 2

分类专栏： CSS 文章标签： css3 css html5 html 前端

本文链接：https://blog.csdn.net/mab_1994/article/details/111058863

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.移动端适配

标签：mate
下面这种写法是等比例的伸缩方式

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=3.0,user-scalable=no"/>

移动端固定模式布局

<meta name="viewport" content="width=320,minimum-scale=1.0,maximum-scale=3.0,user-scalable=no">

属性：
viewport 视口
width=device-width 宽等于屏幕的宽
minimum-scale=1.0 最小伸缩比例
maximum-scale=3.0 最大伸缩比例
user-scalable=no 禁止用户缩放

2.弹性盒子（自适应布局）

设置布局模式：display：flex;(弹性布局)
flex-direction 属性指定了弹性子元素在父容器中的位置。
flex-direction的值有:
row：横向从左到右排列（左对齐），默认的排列方式。
row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
column：纵向排列。
column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。
子元素按照比例划分区域： flex: 1;
设置弹性子元素的y轴对齐方式（给父元素设置）：
align-items:flex-start;(y轴左对齐)
align-items:flex-end；(y轴右对齐)
align-items:center；（剧中对齐）
align-items:baseline；（默认左对齐）y
设置子元素在y轴对齐方式：（给父元素设置）
justify-content:space-between; （两端对齐中间留白）
justify-content:space-around；（留白均等划分）
justify-content：flex-start；（左对齐）
justify-content：flex-end；（右对齐）
控制子元素居中对齐：align-items: center;
order属性设置给子元素的控制子元素的位置：order：1；
弹性盒子里面的行元素默认不折行(单行显示的)：flex-wrap: nowrap;
设置wrap多行显示：flex-wrap: wrap;
元素水平+垂直居中：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=3.0,user-scalable=no"/>
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body,.box{
            width: 100%;
            height: 100%;
        }
        .box{
            display: flex;
        }
        .squer{
            margin: auto;
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="squer"></div>
</div>
</body>
</html>

设置子元素的 y轴的对齐方式：align-self: center;（给子元素设置）
移动端使用自适应布局时像素单位建议使用 rem em

3.媒体查询

注释：根据不同的设备加载不同的代码
解决的问题主要时不同分辨率的设备之间的差异（根据不同写css，或者根据不同写不同的网页布局）
条件值：min-width；max-width；
用min-width时，由小到大依次写；
用max-width时，由大到小依次写；
双条件写法；
1.如下代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,
    minimum-scale=1.0,maximum-scale=3.0,user-scalable=no">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        /*所有设备通用样式*/
        .box{
            height: 100px;
            box-shadow: 0 0 10px #000;
        }

        /*
        根据不用的分辨率做不同的背景色
        */
        /*双条件*/
        @media screen and (min-width: 1440px) and (max-width: 1680px) {
            .box{
                background-color: blanchedalmond;
            }
        }
        @media screen and (min-width: 1280px) and (max-width: 1440px) {
            .box{
                background-color: red;
            }
        }
        @media screen and (min-width: 1024px) and (max-width: 1280px) {
            .box{
                background-color: blue;
            }
        }
        @media screen and (min-width: 768px) and (max-width: 1024px) {
            .box{
                background-color: deeppink;
            }
        }
        @media screen and (max-width: 768px) {
            .box{
                background-color: #37ff8d;
            }
        }
        
        
       /* 同max-width，由大到小写
       @media screen and (max-width:1680px){
            .box{
                background-color: blanchedalmond;
            }
        }
        @media screen and (max-width:1440px){
            .box{
                background-color: red;
            }
        }
        @media screen and (max-width:1280px){
            .box{
                background-color: blue;
            }
        }
        @media screen and (max-width:1024px){
            .box{
                background-color: deeppink;
            }
        }
        @media screen and (max-width:768px){
            .box{
                background-color: orangered;
            }
        }*/
        

        /*用min-width，由小到大写
        @media screen and (min-width:768px){
            .box{
                background-color: orangered;
            }
        }
        @media screen and (min-width:1024px){
            .box{
                background-color: deeppink;
            }
        }
        @media screen and (min-width:1280px){
            .box{
                background-color: blue;
            }
        }
        @media screen and (min-width:1440px){
            .box{
                background-color: red;
            }
        }*/
    </style>
</head>
<body>
 <div class="box">

 </div>
</body>
</html>

2.根据同的屏幕尺寸加载不同的css外部文件

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="./css/style1.css" media="screen and (min-width:1280px) and (max-width:1440px)"/>
    <link rel="stylesheet" href="./css/style2.css" media="screen and (min-width:1024px) and (max-width:1280px)"/>
</head>
<body>
<div class="box"></div>
</body>
</html>

4.文本域

文本域：<textarea></textarea>
去掉可拉大小的样式：resize: none;

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        textarea{
            resize: none;
        }
        ul>li{
            width: 50px;
            height: 50px;
            border-radius: 5px;
            border: 1px solid #cbcbcb;
            box-sizing: border-box;
            text-align: center;
            line-height: 50px;
            font-size: 18px;
            list-style: none;
            display: inline-block;
            cursor: pointer;
        }
        ul>li:hover{
            background-color: #bbbbbb;
        }
        .ck{
            background-color: blue;
            color: #fff;
        }
    </style>
</head>
<body>
 <textarea></textarea>
 <ul>
     <li><<</li>
     <li class="ck">1</li>
     <li>2</li>
     <li>3</li>
     <li>4</li>
     <li>5</li>
     <li>6</li>
     <li>>></li>
 </ul>
</body>
</html>

5.CSS多列布局

当前元素分割几列：column-count: 3;
设置列之间的缝隙默认由间距：column-gap: 10px;
设置列间距之间的中间线：column-rule: 1px solid red;
设置列宽别和count一块使用
column-width: 100px;
column-width: 100px;
column-width 和column-count 不联用
column-span 设置子集值 1 all

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .par{
            /*当前元素分割几列*/
            /*column-count: 3;*/
            /*设置列之间的缝隙  默认由间距*/
            column-gap: 10px;
            /*设置列间距之间的中间线*/
            column-rule: 1px solid red;
            /*设置列宽  别和count一块使用*/
            /*column-width: 100px;*/
            /*column-width: 100px;*/
            column-count: 4;
            border: 1px solid red;
            height: 400px;
        }
        .child{
            border: 1px solid blue;
            height: 100px;
        }

        .content{
            /*column-width: 100px;*/
            /*column-rule: 1px solid pink;*/
            column-count: 3;
        }

        .col{
            column-span: 1;
        }
    </style>
</head>
<body>
<div class="par">
    <div class="child col"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>
<div class="content">
    当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，
    我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，
    我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。
    当我现在躺在床上，行将就木时，我突然意识到：
    如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；
    在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。
</div>
</body>
</html>

6.CSS选择器

:first-letter 选取文本第一个字母
:first-line 选取文本的第一行
:first-of-type 选取同类别元素的第一个
:last-of-type 选取同类别元素的最后一个
:only-of-type 选取的同类别元素是父元素的唯一一个
:only-child 选取的是父元素的唯一子集
:nth-of-type(1) 选取同类别元素的第几个从1开始
:nth-last-of-type(n) 从后向前数同类别元素
:root 选择的是html根元素
:empty 选择的是空元素元素内容上无内容
:not(selector) 匹配的元素除过谁
::selection 选择文本操作
只读读写
input表单对象元素添加readonly属性变只读

input:read-only{
            color: red;
        }
input:read-write{
            color: blue;
        }

练习如下代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        p:first-letter{
            color: red;
        }
        p:first-line{
            color: green;
        }
        ul>li:first-of-type{
            color: red;
        }
        li:last-of-type{
            color: red;
        }
        h3:only-of-type{
            color: red;
        }

        li:only-child{
            color: red;
        }

        ul>li:nth-of-type(1){
            color: green;
        }

        html{
            color: darkorchid;
        }
        
        .hs:not(h5){
            color: red;
        }
        ::selection{
            background-color: yellow;
            color: #000;
        }

        input:out-of-range{
            border: 1px solid red;
            color: red;
        }

        input:read-only{
            color: red;
        }
        input:read-write{
            color: blue;
        }
    </style>
</head>
<body>
<p>元素CSS选择器用于选择你<br/>想要的的样式的模式。</p>
<ul>
    <h3>0</h3>
    <h3>0</h3>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
<ul>
    <li>哈哈哈哈</li>
</ul>
<div></div>

<h1 class="hs">标签</h1>
<h2 class="hs">标签</h2>
<h4 class="hs">标签</h4>
<h5 class="hs">标签</h5>

<input type="number" min="5" max="10" value="20"/>

<input type="text" readonly value="123"/>
<input type="text"  value="123"/>
</body>
</html>