CSS进阶

最新推荐文章于 2024-04-03 04:40:43 发布
最新推荐文章于 2024-04-03 04:40:43 发布
阅读量73 收藏
点赞数
文章标签： css html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/luli007x/article/details/129887734
版权

第二周

一.Emmet语法

​ 作用：提高HTML/CSS的编写速度

  • 快速创建HTML标签

1.1一般快捷方式

快速写标签 p+ENTER/p+table

标签指定个数p*n

1.2.父子关系表示

ul>li*n

兄弟关系表示

div+p

1.3快速创建 类(.name+ENTER)与id(#name+ENTER)选择器

1.4创建多个

.class$*n

div{内容}*n

div{$}*n

  • 快速创建CSS样式语法

在style标签中可用

h300 直接设置高

tac 直接设置文本居中等行为

二.复合选择器

​

    1. 建立在基础选择器之上，对基础选择器进行组合形成
    2. 更准确，更高效的选择目标元素（标签）。
    3. 包括：后代选择器，子选择器，并集选择器，伪类选择器等

  • 后代选择器

元素1空格元素2{样式声明} 例：ul li{color:red;}

元素1与元素2中间用空格隔开

元素1是父级，元素2是子/孙

元素1和2可以是任意基础选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  <style>
      ul li{
        color:red;
    `
    ol li a{
        color:red;
    }
    .pink li a{
        color:pink;
    }
  </style>
</head>
<body>
    <ul>
        <li>我是ul的孩子</li> <!--内容全部被更改-->
        <li>我是ul的孩子</li> <!--内容全部被更改-->
        <li>我是ul的孩子</li> <!--内容全部被更改-->
        <li>我是ul的孩子</li> <!--内容全部被更改-->
        <li><a href="#">孙子</a></li> <!--想改这个看ol里面-->

    </ul>

    <ol>
        <li>我是ol的孩子</li>
        <li>我是ol的孩子</li>
        <li>我是ol的孩子</li>
        <li>我是ol的孩子</li>
        <li><a href="#">孙子</a></li><!--红色-->
    </ol>

    <ol class="pink"> <!--如果有好几个ol，在这里加个类名-->
        <li>我是ol的孩子</li>
        <li>我是ol的孩子</li>
        <li>我是ol的孩子</li>
        <li>我是ol的孩子</li>
        <li><a href="#">孙子</a></li><!--粉色-->
    </ol>
    
</body>
</html>

  • 子选择器

    子元素选择器 只能选择作为某元素的最近一级子元素（简单理解就是选亲儿子元素）

    • 元素1 和 元素2 中间用 大于号 隔开
    • 元素1 是父级，元素2 是子级，最终选择的是元素2
    • 元素2 必须是亲儿子，其孙子、重孙之类都不归他管. 你也可以叫他 亲儿子选择器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  <style>
    .nav>a{
        color:pink;
    }
  </style>
</head>
<body>
   <div class="nav"><a href="#">儿子</a>
    <p><a href="#">孙子</a></p><!--不是儿子不变色-->
   </div>
    
</body>
</html>

  • 并集选择器

    并集选择器可以选择多组标签, 同时为他们定义相同的样式，通常用于集体声明。并集选择器是各选择器通过英文逗号（,）连接而成，任何形式的选择器都可以作为并集选择器的一部分。

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  <style>
    div,p,span,.pig{
        color:red;
    }
    
  </style>
</head>
<body>
 <div>熊大</div>
<p>熊二</p>
<span>光头强</span>
<ul class="pig">
    <li>佩奇</li>
    <li>猪爸爸</li>
    <li>猪妈妈</li>
</ul>    
</body>
</html>

  • 伪类链接选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  <style>
    /* 按照LVHA的顺序来写  一般用到link和hover*/
  a:link{color:#333;/*显示颜色改为黑色*/
 text-decoration: none; /*去掉下划线*/
        }
    a:visited{
        color:orange;/*访问过的颜色*/
    }
  a:hover{
    color:skyblue;/*悬停是颜色*/
  }
  a:active{color:green;}/*正在按下还未弹起的颜色*/
    
  </style>
</head>
<body>
    <a href="#">链接伪类选择器</a>
   
</body>
</html>

  • focus伪类选择器

    ​ 用于选取获得焦点的表单元素，焦点就是光标，一般情况input标签才能用，主要针对标签.

    • 将选中的表单光标改色
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    input:focus{
      background-color:pink;
    }
  </style>
</head>
<body>
<input type="text">  
<input type="text">
<input type="text">  
</body>
</html>

复合选择器综合

选择器作用特征使用情况隔开符号及用法
后代选择器用来选择后代元素可以是子孙后代多.nav a 空格
子代选择器选择最近一级元素只能是最近的儿子少.nav>p 大于号
并集选择器选择某些相同样式的元素可以用于集体声名多.nav,div 逗号
链接伪类选择器选择不同状态的链接跟链接相关多a{}和a:hover
：focus选择器选择获得光标的表单跟表达那相关少input:focus

三.CSS元素显示模式

  • 元素的显示模式

1.1块元素：h1-h6、p、div、ul、ol、li其中div最典型

块元素特点

  1. 独占一行
  2. 高、宽、内 外边距都可控
  3. 宽度默认是容器（父级宽度）的100%
  4. 是一个容器及盒子，里面可以放行内或块级元素
  5. 文字类元素内不能使用块元素例：p、h1-h6里不可有div
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
   div
   {
      height:20px;
      padding:10%;
   }
  </style>
</head>
<body>
  <div>这里可以调节宽高边距</div>
  

</body>
</html>

1.2行内元素：span、a、strong、b、em、i、del、s、ins、u其中span最典型

行内元素特点：

  1. 相邻行内元素在一行上，一行上可以显示多个
  2. 高、宽直接设置是无效的
  3. 默认宽度就是本身内容的宽度（自动把盒子撑开）
  4. 行内元素只能容纳文本或其他行内元素
  5. 链接里不能放链接a里面不能套a
  6. a内可以放块元素，但需转换
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
    <span>1</span> <span>2</span> <span>3</span>
</body>
</html>

1.3行内块元素

img、input、td

他们同时具有两者的特点

  1. 一行可放多个
  2. 默认宽度就是本身内容
  3. 宽、高、外边距都可控
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    input{ height:20px;

    }
  </style>
</head>
<body>
 <input type="text">
 <input type="text">
</body>
</html>
元素模式元素排列设置样式默认宽度包含
块级元素一行只能放一个块级元素可设宽高容器的100%可包含任意标签
行内元素一行可以放多个行内元素不可直接设宽高，间接本身内容的宽度文本或其他行内标签
行内块元素一行可放多个行内块元素可设宽高本身内容的宽度

  • 元素显示模式转换

简单理解：一个模式的元素需要另外一种模式的特性

例:增加a的触发范围 使用较多

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    a{
      height: 200px;
      width: 150px;
      background-color:pink;
      display:block;
    }
    
  </style>
</head>
<body>
  <a href="#">金星阿姨</a>
  <a href="#">金星阿姨</a>

</body>
</html>

​ 案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
   a{
    height: 40px;/*触发范围*/
    width: 230px;/*触发范围*/
    display:block;/*改为块级元素*/
    color:white;
    background-color: #55585a;
    text-decoration: none;/*去掉下划线*/
    text-indent: 2em;/*缩进两个文字*/
    line-height: 40px;/*文字行高等于盒子高度可以实现垂直居中效果*/

   }
   a:hover{
    background-color:orange;
   }

    
  </style>
</head>
<body>

<a href="#">手机 电话卡</a>
<a href="#">电视盒子</a>
<a href="#">平板 电脑</a>
<a href="#">耳机音箱</a>
<a href="#">健康儿童</a>
<a href="#">出行穿戴</a>
</body>
</html>

例：块元素转为行内元素

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    a{
      height: 200px;
      width: 150px;
      background-color:pink;
      display:block;
    }
    div{
    display:inline;
    }
    
  </style>
</head>
<body>
  <a href="#">金星阿姨</a>
  <a href="#">金星阿姨</a>
  <div>我是块级元素，想要变成行内元素</div>
   <div>我是块级元素，想要变成行内元素</div>

</body>
</html>

 同样的改为行内块元素使用display:inline-block;

四.CSS的背景

CSS背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等

  • 背景颜色background-color

  • 背景图片 background-image:url()

    装饰性的小图片或超大的图片

优点是便于控制位置

  • 背景平铺

简单理解就是重复

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    
div{width: 200px;
  height: 200px;
  background-color: #fff;
   background-repeat:no-repeat;
   /* 平铺还可以设置repeat、repeat-x、repeat-y */
}
    
  </style>
</head>
<body>
  <div>

  </div>

</body>
</html>

  • 背景图片位置background-position: x y

​

1.1 方位控制 top、bottom、left、right、center 其中1和2是y轴3和4是x轴，center x和y位置可交换若只定义一个那剩下的为居中（center）

  • 如果俩个值都是方位名词，则两个值前后顺序无关，比如

left top与top left效果一致

  • 如果只指定一个方位名词，另一个值省略，则第二个值默认居中对齐
  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
body{ 
    background-image:url(地址);
    background-position:center top;
    background-position:top;
    background-position:top center;
    background-repeat:no-repeat;
}
</div>  
</head>
  <body>
  </body>
  </html>

1.2 更准确的控制 参数是精确单位

  • 第一个是x坐标，第二个是y坐标
  • 若只指定一个值，那该数一定是x坐标，y坐标默认居中对齐
  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
body{ 
    background-image:url(地址);
    background-position:20px 20px; /*其中第一个20px是x轴距离最左端距离,第二个20px是y轴上距离顶端的距离*/
    background-repeat:no-repeat;
}
</div>  
</head>
  <body>
  </body>
  </html>

1.3 混合使用

  • 第一个是x坐标，第二个是y坐标
background-position:20px center;/*距离最左端20px，y方向上居中对齐*/
background-position:center 20px;/*水平居中对齐，距离最上端20px*/

  • 背景图像固定 background-attachment

​ 设置背景图像是否固定或随着页面滚动

参数作用
scroll背景图像随对象内容滚动
fixed背景图像固定
  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    body{
        background-image:url(url);
        background-repeat:no-repeat;
        background-attachment:fixed;/*现在图片固定不会随滚轮滚动*/
        <!-- 默认情况是scroll,随着滚动 -->
    }
 
</head>
  <body>

  </body>
  </html>

1.4复合写法

background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置

background: pink url(image.jpg) nopeat fixed center top;

  • 背景半透明

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 <style>
       div{
        width:200px;
        height:200px;
        background:rgba(0,0,0,0.5); /*第四个是透明度从0到1*/   
    }
 </style>
</head>
<body>
    <div>

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

背景总结

属性作用值
background-color背景颜色直接/十六进制/rgb代码
background-image背景图片url(图片路径)
background-repeat是否平铺repeat/no-repeat/repeata-x/repeat-y
background-position背景位置方位/x y坐标
background-attachment附着scroll默认滚动/fixed(固定)
背景简写书写更透明颜色 地址 平铺 滚动 位置
背景色半透明背景色半透明background:rgba(0,0,0,0.3) 四个值

五.CSS的三大特性

5.1层叠性

相同选择器设置相同的样式,一个样式会覆盖另一个冲突的样式.层叠性主要解决样式冲突.

  • 就近原则
  • 不冲突的样式都执行
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            color:red;
            font-size:large;/*两个p选择器都有color属性*/
        }
        p{
            color:pink;/*就近原则用pink*/
        }/*字体大小不冲突使用*/
    </style>
</head>
<body>
    <p>长江后浪推前浪</p>
</body>
</html>

5.2继承性

CSS中的继承:子标签会继承父标签的某些样式,如文本颜色和字号

主要继承文字(text-,font-,line-以及color)35

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      div{color:pink;}
        /*虽然只选择了div但是在html中div含有p这个子标签p的内容就被修饰了*/
    </style>
</head>
<body>
    <div>
    <p>长江后浪退前浪</p>
    </div>
</body>
</html>

5.3优先级

  • 选择器相同,则执行层叠性
  • 选择器不同,根据权重执行
选择器选择器权重
继承 或 *(通配符)0,0,0,0
标签选择器0,0,0,1
类选择器,伪类选择器0,0,1,0
ID选择器0,1,0,0
行内样式style=“”1,0,0,0
!important 重要的无穷大
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
     /* 继承 */body{color:red;}
     /* 标签 */div{color:yellow!important;}
     /* 类,伪类 */.pink{color:pink;}
     /* ID*/#blue{color:blue;}

     
    </style>
</head>
<body>
    <div  class="pink" id="blue" style="color:green;">
        选择器的权重
    </div>
</body>
</html>
  • 权重叠加

如果是复合选择器,需要计算权重

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* ul li权重 0,0,0,1 + 0,0,0,1=0,0,0,2 */
     /*后代选择器  */ ul li{color:red;}

/* 权重li0,0,0,1 */
     li{color:yellowgreen;}

     /* 权重.nav li 0,0,1,0 +0,0,0,1 = 11 */
        .nav li{color:skyblue;}
    </style>
</head>
<body>
<ul class="nav">
    <li>吃喝玩乐</li>
    <li>吃饭碎觉</li>
</ul>
</body>
</html>

权重的计算

div ul li0,0,0,3
.nav ul li0,0,1,2
a:hover0,0,1,1
.nav a0,0,1,1

计算示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* ul li权重 0,0,0,1 + 0,0,0,1=0,0,0,2 */
     /*后代选择器  */ ul li{color:red;}

/* 权重li0,0,0,1 */
     li{color:yellowgreen;}

     /* 权重.nav li 0,0,1,0 +0,0,0,1 = 11 */
        .nav li{color:skyblue;}
    </style>
</head>
<body>
<ul class="nav">
    <li>吃喝玩乐</li>
    <li>吃饭碎觉</li>
</ul>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    ul li{color:red;}/*11*/
        .pink{color:pink;}/*10*/
        /*此时红色改不为pink*/
        .nav .pink{color:pink;}
        /*可以这样*/
    </style>
</head>
<body>
<ul class="nav">
    <li class="pink">吃喝玩乐</li>
    <li>吃饭碎觉</li>
</ul>
</body>
</html>

六.盒子模型

6.1盒子模型

组成:边框border,内边距padding,外边距margin,实际内容content

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3KZIF98v-1680264227337)(images/1571492529986.png)]

6.1.1 边框:粗细,样式,颜色

​ 复合写法:border: 1px solid red;没有顺序

属性作用
border-width定义边框粗细,单位一般px
border-style边框样式虚线dashed,实线solid,点线dotted
border-color边框颜色

​ 实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
  div
  {
      width: 200px;
      height: 200px;
      border: 1px solid blue;
  }
  .bian{border-top: 1px solid red;}
    </style>
</head>
<body>
<div class="bian">
</div>
</body>
</html>

​ 表格的细线边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table,td{border:1px solid red;}
        table{border-collapse: collapse;/*细线边框*/
        height: 200px;
        text-align: center;
    width: 200px;}
    </style>
</head>
<body>
    <table align="center" cellspacing="0"> /*整个表格居中,并且所有线连在一起*/
        <tr>
            <td>1</td> 
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
        <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td><td>1</td>
        </tr><tr1>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td><td>1</td>
        </tr1>
    </table>  
</body>
</html>

​ 6.1.2内边距padding

设置边框与内容之间的距离

值的个数表达意思
padding:5px;上下左右都有5像素内边距
padding:5px 10px;上下是5像素,左右是10像素
padding:5px 10px 20px;上是5像素,左右10像素,下20像素
padding:5px 10px 20px 30px;顺序上右下左

​ 4、内边距（padding）

4.1、内边距的使用方式

1、padding 属性用于设置内边距，即边框与内容之间的距离。

2、语法：

合写属性：

分写属性：

4.2、内边距会影响盒子实际大小

1、当我们给盒子指定 padding 值之后，发生了 2 件事情：

  1. 内容和边框有了距离，添加了内边距。
  2. padding影响了盒子实际大小。

2、内边距对盒子大小的影响：

  • 如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。
  • 如何盒子本身没有指定width/height属性, 则此时padding不会撑开盒子大小。

3、解决方案：

​ 如果保证盒子跟效果图大小保持一致，则让 width/height 减去多出来的内边距大小即可。

5、外边距（margin）

5.1、外边距的使用方式

margin 属性用于设置外边距，即控制盒子和盒子之间的距离。

5.2、外边距典型应用

外边距可以让块级盒子水平居中的两个条件：

  • 盒子必须指定了宽度（width）。
  • 盒子左右的外边距都设置为 auto 。

常见的写法，以下三种都可以：

margin-left: auto;   margin-right: auto;
margin: auto;
margin: 0 auto;

注意：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可。

5.3、外边距合并

使用 margin 定义块元素的垂直外边距时，可能会出现外边距的合并。

主要有两种情况:

1、相邻块元素垂直外边距的合并

​ 当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距 margin-bottom，下面的元素有上外边距 margin-top ，则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和。取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并。

解决方案：
尽量只给一个盒子添加 margin 值。

2、嵌套块元素垂直外边距的塌陷

​ 对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。

解决方案：

  • 可以为父元素定义上边框。
  • 可以为父元素定义上内边距。
  • 可以为父元素添加 overflow:hidden。
5.4、清除内外边距

​ 网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距。

 * {
    padding:0;   /* 清除内边距 */
    margin:0;    /* 清除外边距 */
  }

​ 注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以了

三、PS 基本操作

​ 因为网页美工大部分效果图都是利用 PS（Photoshop）来做的，所以以后我们大部分切图工作都是在 PS 里面完成。

​ 部分操作：

  • 文件→打开 ：可以打开我们要测量的图片
  • Ctrl+R：可以打开标尺，或者 视图→标尺
  • 右击标尺，把里面的单位改为像素
  • Ctrl+ 加号(+)可以放大视图， Ctrl+ 减号(-)可以缩小视图
  • 按住空格键，鼠标可以变成小手，拖动 PS 视图
  • 用选区拖动 可以测量大小
  • Ctrl+ D 可以取消选区，或者在旁边空白处点击一下也可以取消选区

``css
margin-left: auto; margin-right: auto;
margin: auto;
margin: 0 auto;


注意：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可。

#### 5.3、外边距合并

使用 margin 定义块元素的垂直外边距时，可能会出现外边距的合并。

主要有两种情况:

1、相邻块元素垂直外边距的合并

​		当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距 margin-bottom，下面的元素有上外边距 margin-top ，则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和。取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并。



解决方案：
		尽量只给一个盒子添加 margin 值。

2、嵌套块元素垂直外边距的塌陷

​		对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。



解决方案：

- 可以为父元素定义上边框。
- 可以为父元素定义上内边距。
- 可以为父元素添加 overflow:hidden。

#### 5.4、清除内外边距

​		网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距。

```css
 * {
    padding:0;   /* 清除内边距 */
    margin:0;    /* 清除外边距 */
  }

​ 注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以了

三、PS 基本操作

​ 因为网页美工大部分效果图都是利用 PS（Photoshop）来做的，所以以后我们大部分切图工作都是在 PS 里面完成。

​ 部分操作：

  • 文件→打开 ：可以打开我们要测量的图片
  • Ctrl+R：可以打开标尺，或者 视图→标尺
  • 右击标尺，把里面的单位改为像素
  • Ctrl+ 加号(+)可以放大视图， Ctrl+ 减号(-)可以缩小视图
  • 按住空格键，鼠标可以变成小手，拖动 PS 视图
  • 用选区拖动 可以测量大小
  • Ctrl+ D 可以取消选区，或者在旁边空白处点击一下也可以取消选区
漉漓gg
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS进阶指引
09-25
主要介绍了CSS入门指引,其中包括BEM和OOCSS等的代码示例,强烈推荐!需要的朋友可以参考下
CSS进阶总结
m0_52336378的博客
06-17 551
每个浏览器都有一些自带的或者共有的默认样式，或造成一些布局上的困扰，css reset的作用就是重置这些默认样式，使样式表现一致；/*内边距，上下左右，设置属性，会把盒子撑大,不能设置负数，负数就还原初始状态*//*融合行内于块级，用通俗的话讲，就是不独占一行的块级元素*//*复合样式：可以设置4个值，3个值，2个值，1个值*//*复合样式,可以设置4个值，3个值，2个值，1个值*//*复合样式：边框粗细1px，实线，红色线*//*外边距，可以设置负数，不会撑大盒子*//*第一种：右浮动*/
超详细的学习笔记：CSS进阶（附代码示例）
lbcbjtlhmjq的博客
07-09 388
作用:根据 HTML标签的套关系，选择父元素 子代中 满条件的元素选择器语法:选择器1 > 选择器2{ css }2、背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置，一般在布局中会习惯先给盒子设置背景颜色。在选择器1所找到标签的后代(儿子、孙子、重孙子...)中，找到满足选择器2的标签，i设置样式。作用:同时选择多组标签，设置相同的样式选择器语法:选择器1，选择器2{ css }(既又原则)找到页面中既能被选择器1选中，又能被选择器2选中的标签，设置样式。
css从入门到精通【超详细笔记】，技术详细介绍
最新发布
2301_76379381的博客
04-03 872
浮动设计的初衷为了解决文字环绕图片问题，浮动后一定不会将文字挡住，这是设计初衷，不能违背的。CSS 的 Float（浮动）使元素脱离文档流，按照指定的方向（左或右发生移动），直到它的外边缘碰到包含框或另一个浮动框的边框为止。说到脱离文档流要说一下什么是文档流，文档流是是文档中可显示对象在排列时所占用的位置/空间，而脱离文档流就是在页面中不占位置了。一个好的心态和一个坚持的心很重要。
CSS（进阶）
specialll的博客
07-20 794
一、CSS进阶         1. CSS单位             （1）绝对单位                 在CSS中，绝对单位定义的大小是固定的，使用的是物理度量单位，显示效果不会受到外界因素影响。绝对单位一般多用于传统平面印刷，而极少用于前端开发。在前端开发中，我们都不会用到绝对单位。             （2）相对单位                 在CSS中，
CSS进阶学习资源 面试题
03-07
CSS需要注意的事情！面试官98%会问你的问题！没学这些好意思说自己是前端开发？我就是靠这份找到了实习！
CSS进阶书籍 网上基本没有书签，我的有
11-16
1.深入探索 本书以独特的探索方式对CSS设计技术的原理和方法进行讲解，符合自学者的认知特点。 2.得出结论，总结经验 本书通过一系列的动手实验，使读者自己就能够非常自然地得出结论。对各种设计中产能共用的网页...
css进阶笔记，通俗易懂
04-22
css进阶笔记，通俗易懂，后期会持续更新
html+css进阶.md
05-02
html+css进阶.md11
css进阶学习 选择符
10-16
css这种没有程序逻辑的代码中，又能找出什么来说明谁做得更出色呢？下面小编给大家说明如何从css选择符的角度来提高css代码质量。
CSS进阶.md
10-04
CSS进阶.md
cssui:用于css进阶学习
07-06
轻webapp框架blade小钗有幸进入框架组做webapp的框架开发，并且基于框架的业务频道用于生产，各频道遍地开花，取得了不错的成绩，但是，随着业务的快速迭代，框架为满足业务需求做了很多业务的事情，代码中也慢慢...
NatureTours:这是Jonas Schmedtmann撰写的Udemy进阶的html和CSS进阶课程
04-18
这是乔纳斯·施梅特曼（Jonas Schmedtmann）的Udemy课程，可以在这里找到：
CSS 进阶
Hello_super的博客
02-17 797
CSS 变形 transform 1、translateX/Y **变形（transform）： ** 就是指通过CSS来改变元素的形状或位置，变形不会影响到页面的布局。使用transform标签来设置元素的变形效果。 平移： 平移元素，百分比是相对于自身来计算的。 translateX()，沿着x轴方向平移； translateY()，沿着y轴方向平移； translateZ()，沿着z轴方向平移； transform: translateX() translateY(); /*变形的多个值之间使用
Css进阶练习(实现抽屉网样式布局)
05-26
抽屉网是一种常见的网页布局，可以用 CSS 实现。下面是一个简单的实现方法： HTML 结构： ```html <!-- 网页主体内容 --> <!-- 抽屉内容 --> ``` CSS 样式： ```css .container { display: flex; ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值