css基础语法

-molecule.

已于 2022-11-12 18:48:12 修改

阅读量914

点赞数 1

文章标签： css 前端 html

于 2022-11-04 07:55:00 首次发布

本文链接：https://blog.csdn.net/molecule_9/article/details/127651970

版权

17.标签群组通配等选择器

1.标签选择器(TAG选择器)：
css：div{}
html：< div >
2.群组选择器（分组选择器）：
css：div，p,span{}
可以通过逗号的方式，给多个不同的选择器添加统一的css样式，来达到代码的复用

<!DOCTYPE html>
<html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
      div{ background: red;}
      #text{background:red;}
      .title{background: red;}
    </style>
 </head>
 <body>
    <div>心中有党，成绩理想</div>
    <p id="text">心中有党，成绩理想</p>
    <h2 class="title">心中有党，成绩理想</h2>

</body>   
</html>

成果展示：
在这里插入图片描述
3.通配选择器
*{}—>div，ul，li，p，h1…{}
注：尽量避免使用通配选择器，因为会给所有的标签添加样式，慎用。
使用的场景：去掉所有标签的默认样式时

 <style>
      *{border:1px red solid;}
    </style>

成果展示：
在这里插入图片描述

18.css选择器

层次选择器：
后代：M N
父子：M>N
兄弟：M~N（当前M下面的所有兄弟的N标签）
相邻：M+N（当前M相邻的标签）

 #list li{border:1px red solid;}/*只在ul中添加红色边框:在li前+一个空格+ul*/
    #list>li{border:1px red solid;}/*父子M>N*/
    div~h2/*h2后序给定义，指定内容*/{background:red;}选择下面的
    div+h2{background:red;}选择相邻的

<!DOCTYPE html>
<html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
     ul li{border:1px red solid;}/*只在ul中添加红色边框:在li前+一个空格+ul*/
    </style>
 </head>
 <body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <ol>
        <li></li>
        <li></li>
        <li></li>
    </ol>
    
 </body>   
</html>

或者：

 #list li{border:1px red solid;}
    </style>
 </head>
 <body>
    <ul id="list">
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <ol>
        <li></li>
        <li></li>
        <li></li>
    </ol>

成果展示：
在这里插入图片描述

19.属性选择器

在这里插入图片描述

<style>
        div[class]{background: red;}
        div[class=box]{background: red;}
        div[class*=search]{background: red;}
        div[class$=search]{background: red;}
        div[class][id]{background: red;}
    </style>
 </head>
 <body>
    <div>aaaaaaa</div>
    <div class="box">bbbbbbbbb</div>
    <div class="search">ccccccccccc</div>
    <div class="search-button">dddddddddd</div>
    <div class="button-search">eeeeeeeeeeeee</div>
</body>   
</html>

成果展示：
在这里插入图片描述

20.伪类选择器

css伪类用于向某些元素添加特殊的效果。一般用于初始样式添加不上的时候，用伪类来添加
M:伪类{}
:link、访问前的样式（只能添加给a标签）
:visited、访问后的样式（只能添加给a标签）
:hover、鼠标移入时的样式（可以添加给所有的标签）
:active 鼠标按下时的样式（可以添加给所有的标签）

注：如果四个伪类都生效，一定要注意顺序：LVHA.
一般网站只这样去设置：a{} a：hover{}

<style>
        a:link{color:red;}
        a:visited{color:aqua;}
        a:hover{color:blueviolet;}
        a:active{color:darkgreen}
    </style>
</head>

<body>
    <a href="#">董双玉我爱你</a>
</body>

成果展示：
在这里插入图片描述

：after、：before 通过伪类的方式给元素添加一个文本的内容，使用content属性

     div:after{content:"——绿色";color:green;}
    </style>
</head>

<body>
    <div>董双玉最爱的颜色就是她头顶的颜色</div>

成果展示：
在这里插入图片描述
：checked、：disabled、：focus 都是针对表单元素的

       input{weight：1px;height：1px；}/*把input改成checked，就如成果展示2*/
    </style>
</head>

<body>
      <input type="checkbox">
      <input type="checkbox">
      <input type="checkbox">
</body>

成果展示：
在这里插入图片描述
成果展示2：

：nth-of-type（）、：nth-child（）
：first-of-type、：first-child
：last-oftype、：last-child
：only-of-type（）、：only-child（）
角标是从1开始的，1表示第一项，2表示第二项 |n值表示从0到无穷大

<!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>
        li:nth-of-type(n){background: red;}/*n可以是2n，2n+1*/
    </style>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    
</body>
</html>

成果展示：
在这里插入图片描述

21.css样式继承

文字相关的样式可以被继承
布局相关的样式不能被继承（默认是不能继承的，但是可以设置继承属性：inherit/p{border:inherit}/）

<!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:300px;height:300px;border:1px red solid;color:red;font-size: 30px;}
       /* p{border：inherit;}*/
    </style>
</head>
<body>
  <div>
    <p>这里是董双玉最爱的人
    </p>
  </div>  
</body>
</html>

成果展示：
在这里插入图片描述

22.css优先级

1.相同样式优先级：
当设置相同样式时，后面的优先级较高，但不建议出现重复设置样式的情况。

   <style>
        div{color:blueviolet;}
        div{color:red;}
    </style>
</head>
<body>
    <div>这还是一个块</div>
</body>

成果展示：
在这里插入图片描述

2.内部样式与外部样式：
内部样式与外部样式优先级相同，如果都设置了相同样式，那么后写的引入方式优先级高删除线格式
3.单一样式优先级：
style行间>id>class>tag>*>继承

<style>
       /* div{color:blueviolet;}
        div{color:red;}*/
        #elem{color:red;}
        .box{color:blue;}
        div{color:green;}
        *{color:red;}
        body{color:blue;}
    </style>
</head>
<body>
    <div id="elem">这还是一个块</div>
</body>
</html>

4.！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>
       .box{color:blue;}
       div.p{color:red;}
    </style>
</head>
<body>
    <div class="box">这还是一个块</div>
    <p>这是一个段落</p>
</body>
</html>

5.层次优先级
（1.）权重比较
ul li .box p input{} 1+1+10+1+1
.hello span #elem{} 10+1+100

（2.）约分比较
ul li .box p input{} li p input{}
.hello span #elem{} #elem{}

23.css盒子模型

在这里插入图片描述
1.组成：content（物品）->padding（填充物）->border（包装盒）->margin（盒子与盒子之间的间距）
2.content：内容区域 width和height组成
3.padding：内边距（内填充）
只写一个值：30px（上下左右）
写两个值：30px 40px（上下、左右）
写四个值：30px 40px 50px 60px（上、下、左、右）
单一样式只能写一个值：
padding-left/right/top/bottom
4.margin：外边距（外填充）隔开两个盒子
单一样式只能写一个值
margin-left/right/top/bottom
注：
（1.）背景颜色会填充到margin以内的区域。
（2.）文字会在content区域。
（3.）padding不能出现负值，margin是可以出现负值
5.box-sizing
boxsizing属性允许您以特定的方式定义匹配某个区域的特定元素。取值为content-box（默认值）|border-box。
盒尺寸，可以改变盒子模型的展示形态
默认值：content-box：width、height->content
border-box：width、height->content padding border

使用的场景：
（1.）不用再去计算一些值
（2.）解决一些100%的问题

<!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>
        #box{
            width:200px;height:200px;background:red;border:10px blue solid;
            padding:30px 50px;
            box-sizing:border-box;
        }
    </style>
</head>
<body>
    <div id="box">这是一个盒子</div>
</body>
</html>

6.margin叠加
当给两个盒子同时添加上下边距的时候，就会出现叠加问题。这个问题，只有在上下有，左右没有这个叠加问题的。
出现在上下margin同时出现的时候，会取上下中值较大的作为叠加的值
解决方法：
（1.）BFC规范
（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>
        #box1{width:200px;height:200px;background: green;margin-bottom: 30px;}
        #box2{width:200px;height:200px;background: red;margin-top: 40px;}
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
</body>
</html>

7.margin传递的问题
margin传递问题只会出现在嵌套的结构中，且只有margin-top会有传递的问题，其它三个方向是没有传递问题的
解决方案：
（1.）BFC规范
（2.）给父容器加边框
（3.）margin换成padding

<!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>
        #box1{width:200px;height:200px;background: green;}
        #box2{width:100px;height:100px;background: red;margin-top: 100px;}
    </style>
</head>
<body>
 <!-- <div id="box1"></div>
    <div id="box2"></div>-->
    <div id="box1">
        <div id="box2"></div>
    </div>
</body>
</html>/*把padding加到父元素上*/

8.css盒模型扩展
margin左右自适应是可以的，但是上下自适应是不行的。（如果想实现上下自适应的话，需要在第二大部分来进行学习）

<!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>
        #box1{width:200px;height:200px;background: green;}
        #box2{width:100px;height:100px;background: red;margin-left: 100px;}/*auto自适应*/
    </style>
</head>
<body>
 <!-- <div id="box1"></div>
    <div id="box2"></div>-->
    <div id="box1">
        <div id="box2"></div>
    </div>
</body>
</html>

9.margin自适应居中
不设置content的现象（宽高不设置的时候，对盒子模型的影响，会自动去计算容器的大小，节省代码）

<!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>
        #box1{width:300px;height:300px;background: red;}
        #box2{height:100px;background:blue;color:white;padding-left:30px;border-left:10px black solid;}
    </style>
</head>
<body>
    <div id="box1">
        <div id="box">这是一些内容</div>
    </div>
</body>
</html>

24.、盒子模型的嵌套练习

 <style>
        #box1{ width: 350px; height: 350px; border: 1px black dashed; padding: 27px;}
        #box2{ border: 5px #d7effe solid; padding: 20px;}
        #box3{ background: #ffa0df; padding: 41px;}
        #box4{ border: 1px white dashed; padding: 3px;}
        #box5{ border: 1px white dashed; padding: 49px;}
        #box6{ width: 100px; height: 100px; background: #96ff38; border: #fcff00 5px solid;}
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2">
             <div id="box3">
                <div id="box4">
                     <div id="box5">
                        <div id="box6"></div>
                     </div>
                </div>
             </div>
        </div>
    </div>
</body>

成果展示：
在这里插入图片描述

25、按类型划分标签

标签分类
按类型
block : 块 ( div、p、ul、li、h1···)
1.独占一行
2.支持所有样式
3.不写宽的时候，跟父元素的宽相同
4.所占区域是一个矩形
inline : 内联 ( span、a、em、strong、img···)
1.挨在一起的
2.有些样式不支持，例如: width、height、margin、padding···
3.不写宽的时候，宽度由内容决定
4.所在的区域不一定是矩形
5.内联标签之间会有空隙，原因: 换行产生
注: 布局一般用块标签，修饰文本一般用内联标签
inline-block : 内联块( input、select···)
挨在一起，但支持宽高

<style>
        body{ font-size: 0;}
        /* #box1,#box2{ width: 100px; height: 100px; background: red;}   */
        /* #box1,#box2{height: 100px; background: red;}   */
        #content1,#content2{ width: 100px; height: 100px; background: red; font-size: 16px;}
        input{ width: 100px; height: 100px;}  
    </style>
</head>
<body>
    <!-- <div></div>
    <span></span>
    <input type="text"> -->
    <!-- <div id="box1">庄达菲</div>
    <div id="box2">郭淼淼</div> -->
    <!-- <span id="content1">内联1内联1内联1内联1</span><span id="content2">内联2</span> -->
    <span id="content1">内联1内联1内联1内联1</span>
    <span id="content2">内联2</span>
    <input type="text">
    <input type="text">
</body>

26、按内容划分标签

按内容
Flow : 流的内容
Metadate : 元数据
Sectioning: 分区
Heading : 标题
Phrasing : 措辞
Embedded : 嵌入的
Interactive : 互动的

W3C

27、按显示划分标签

按显示
替换元素 : 浏览器根据元素的标签和属性，来决定元素的具体显示内容
img、input···
非替换元素 : 将内容直接告诉浏览器，将其显示出来
div、h1、p···

 <style>
        img{ width: 100px; height: 100px;}
    </style>
</head>
<body>
    <img src="./Web前端学习3/img/1.jpg" alt="">
    <!-- <input type="checkbox">
    <h1>标题</h1> -->
</body>

28、display显示框类型

display
block
inline
inline-block
none
注: 区别
display:none( 不占空间的隐藏)
visibility:hidden( 占空间的隐藏)

<style>
        /* div{ width: 100px; height: 100px; background: red; display: inline;} */
        /* div{ width: 100px; height: 100px; background: red; display: inline-block;}
        span{ width: 100px; height: 100px; background: red; display: inline-block;}
        input{ display:none;} */
        #box1,#box2{ width: 100px; height: 100px; background: red;}
        /* #box1{ display: none;} */
        #box1{ visibility: hidden;}
    </style>
</head>
<body>
    <!-- <div>庄达菲</div>
    <div>郭淼淼</div>
    <span>内联1</span>
    <span>内联2</span>
    <input type="text"> -->
    <div id="box1">庄达菲</div>
    <div id="box2">郭淼淼</div>
</body>

29、标签嵌套规范

ul、li
dl、dt、dd
table、tr、td
1.块标签可以嵌套内联标签

块嵌套内联
<div>
    <span></span>
    <a href="#"></a>
</div>

块嵌套块
<div>
    <div></div>
</div>

2.块标签不一定能嵌套块标签

特殊:
    错误的写法
<p>
  <div></div>
</p>

3.内联标签不能嵌套块标签
a标签是一个例外

错误的写法:
<span>
     <div></div>
</span>

特殊:
    正确的写法:
<a href="#">
    <div></div>
</a>

30、overflow溢出隐藏

overflow
visible : 默认
hidden
scroll
auto
x轴、y轴
overflow-x、over-flow-y针对两个轴分别设置

<style>
        /* div{ width: 300px; height: 200px; border: 1px black solid; overflow: hidden;} */
        /* div{ width: 300px; height: 200px; border: 1px black solid; overflow: scroll;} */
        div{ width: 300px; height: 200px; border: 1px black solid; overflow: auto;}
    </style>
</head>
<body>
    <div>
        董双玉董双玉董双玉
        是个大傻子
        是个大傻子
    </div>
</body>

31、透明度与手势

1.opacity : 0(透明，占空间) ~ 1(不透明)
0.5(半透明)
注: 占空间、所有的自内容也会透明
2.rgba( ): 0 ~ 1
注: 可以让指定的样式透明，而不影响其他样式
3.cursor : 手势
default: 默认箭头
要实现自定义手势:
准备图片: .cur、.ico

<style>
        #div1{ width: 100px; height: 100px; background: red; opacity: 0.5;}
        #div2{ width: 100px; height: 100px; background: rgba(255,0,0,0.5);
             /* cursor: pointer; */
             cursor : url( ./img/cursor.ico),auto;}
    </style>
</head>
<body>
    <div id="div1">这是一个块</div>
    <p>这是一个段落</p>
    <div id="div2">这又是一个块</div>
</body>

32、最大最小宽高

min-width、max-width
min-height、max-height
注 : 强化对百分比单位的理解
%单位: 换算 -> 以父容器的大小进行换算
一个容器怎么适应屏幕的高: 容器加height: 100%；body: 100%；html: 100%；
html，body{ height:100%；}
.contrainer{ height: 100%；}

<style>
        /* div{ width: 200px; max-height: 200px; border: 1px red solid;} */
        body{ height: 500px;}
        /* #box1{ width: 200px; height: 200px; background: red;} */
        #box1{ width: 200px; height: 100%; background: red;}
        #box2{ width: 100%; height: 80%; background: blue;}
    </style>
</head>
<body>
    <!-- <div>
        这是一段内容
        这是一段内容
        这是一段内容
        这是一段内容
    </div> -->
    <div id="box1">
         <div id="box2"></div>
    </div>
</body>

33、css默认样式

有些标签有默认样式，有些标签没有默认样式。
没有默认样式:
div、span、···
有默认样式:
body、h1···h6、p、ul、···
body -> marign : 8px
h1 -> margin : 上下 21.440px
font-weight : bold
p -> margin : 上下 16px
ul -> margin : 上下 16px
padding: 左 40px
默认点: list-style : disc
a -> text-decoration: underline；

34、css重置样式

简单的CSS reset

 *{ margin: 0; padding: 0;}
 优点:
 缺点:稍微的影响性能
 ul{ list-style: none;}
 a{ text-decoration: none; color: #666;}
 img{ display: block;}
 问题的现象: 图片跟容器底部有一些空隙。
 内联元素的对齐方式是按照文字基线对齐的，而不是文字底线对齐的。
 vertical-align: baseline; 基线对齐方式，默认值
 vertical-align: bottom; 解决方式是推荐的

写具体页面的时候或一个布局效果的时候:
1.写结构
2.css重置样式
3.写具体样式

<style>
        /* ul{ list-style: none;}
        a{ text-decoration: none; color: #999;}
        a:hover{ text-decoration:underline; color: red;} */
        div{ border: 1px black solid;}
        /* img{ vertical-align: baseline;} */
        /* img{ vertical-align: bottom;} */
        img{ display: block;}
    </style>
</head>
<body>
    <!-- <div>这是一个块</div>
    <span></span>
    <h1></h1>
    <ul>
        <li></li>
    </ul>
    <a href="#">这是一个链接</a> -->
    <div>
        <img src="./img/2.jpg" alt="">
    </div>

35、float浮动概念及原理

文档流
文档流是文档中可显示对象在排列时占用的位置
float特性
加浮动的元素，会脱离文档流，会延迟容器靠左或靠右排列，如果之前已经有浮动的元素，会挨着浮动的元素进行排列。
float的取值
left
right
none(默认)

<style>
        body{ border: 1px black solid;}
        #box1{ width: 100px; height: 100px; background: yellow; float: left;}
        #box2{ width: 200px; height: 200px; background: red; float: left;}
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
</body>

36、float注意点整理

float注意点:
1.只会影响后面的元素
2.内容默认提升半层
3.默认宽根据内容决定
4.换行排列
5.主要给块元素添加，但也可以给内联元素添加

ul{ margin: 0; padding: 0; list-style: none; width: 300px;
             height: 300px; border: 1px black solid;}
        li{ width: 100px; height: 100px; background: red; 
            border: 1px yellow solid; box-sizing: border-box; float: left;}
        li:nth-of-type(1){ height: 120px;}
        li:nth-of-type(2){ height: 80px;}
        span:last-type{ float:right}
    </style>
</head>
<body>
    <!-- <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3">庄达菲庄达菲庄达菲庄达菲</div>
    <div id="box4">这是一个没有宽度的块元素</div> -->
    <ul>
       <li>1</li>
       <li>2</li>
       <li>3</li>
       <li>4</li>
    </ul>
    <span>庄达菲</span><span>郭淼淼</span>
</body>

37、清除float浮动(上、下)

利用clear属性清除float浮动
(clear属性只会操作块标签，对内联标签不起作用)
嵌套排列:
1.固定宽高 : 不推荐，不能把高度固定死，不适合做自适应的效果。
2.父元素浮动: 不推荐，因为父容器浮动也会影响到后面的元素。
3.overfloat : hidden(BFC规范)，如果有子元素想溢出，那么会受到影响。
4.display : inline-block(BFC规范)，不推荐，父容器会影响到后面的元素。
5.设置空标签: 不推荐，会多添加一个标签。
6.after伪类: 推荐，是空标签的加强版，目前各大公司的做法。
上下排列: clear属性，表示清除浮动的，left、right、both

<style>
        /* #box1{ width: 100px; height: 100px; background: red; float: left;}
        #box2{ width: 200px; height: 200px; background: blue; clear: left;} */
        /* #box1{ width: 100px; height: 100px; background: red; float: right;}
        #box2{ width: 200px; height: 200px; background: blue; clear: both;} */
        /* #box1{ width: 200px; height: 200px; border: 1px black solid;}
        #box2{ width: 100px; height: 200px; background: red; float: left;} */
        /* #box1{ width: 200px; border: 1px black solid; float: left;}
        #box2{ width: 100px; height: 200px; background: red; float: left;} */
        /* #box1{ width: 200px; border: 1px black solid; overflow: hidden;}
        #box2{ width: 100px; height: 200px; background: red; float: left;}*/
        /* #box1{ width: 200px; border: 1px black solid; display: inline-block;}
        #box2{ width: 100px; height: 200px; background: red; float: left;} */
        /* #box1{ width: 200px; border: 1px black solid;}
        #box2{ width: 100px; height: 200px; background: red; float: left;}
        .clear{ clear: both;} */
        #box1{ width: 200px; border: 1px black solid;}
        #box2{ width: 100px; height: 200px; background: red; float: left;}
        .clear:after{ content: ''; clear: both; display: block;}
    </style>
</head>
<body>
    <!-- <div id="box1"></div>
    <div id="box2"></div> -->
    <!-- <div id="box1">
        <div id="box2"></div>
        <div class="clear"></div>
    </div>
    庄达菲庄达菲 -->
    <div id="box1" class="clear">
        <div id="box2"></div>
        </div>
    郭淼淼郭淼淼
</body>

38、float制作页面小结构

 <style>
        *{ margin: 0; padding: 0;}
        ul{ list-style: none;}
        img{ display: block;}
        a{ text-decoration: none; color: #666;}
        h1,h2,h3{ font-size: 16px;}
        .l{ float: left;}   
        .r{ float: right;}
        .clear:after{ content: ""; display: block; clear: both;}
        #main{ width: 366px; margin: 20px auto;}
        #main.title{ height: 23px; line-height: 23px; font-size: 12px; font-weight: bold; padding-left: 30px;
            background:url(./img2/bg_title.png) no-repeat 6px 4px , url(./img2/bg_line.png) repeat-x;}
        #main ul{ overflow: hidden; margin-top: 13px;}
        #main li{ margin-bottom: 22px;}
        #main .pc{ width: 99px; border: 1px solid #c8c4d3; margin-left: 5px;}
        #main .pc img{ margin: 2px;}
        #main .content{ width: 240px; margin-left: 13px;}
        #main .content h2{ font-size: 12px; line-height: 24px;}
        #main .content p{ font-size: 12px; line-height: 20px;}
    </style>
</head>
<body>
    <div id="main">
        <h2>外媒评论精选</h2>
        <ul>
            <li class="clear">
                <div class="l pic">
                    <a href="#">
                        <img src="./img2/img.png" alt="">
                    </a>
                </div>
                <div class="l content">
                    <h2>测试标题测试标题</h2>
                    <p>
                        测试段落测试段落测试段落测试段落测试段落测试段落测试段落····
                        <a href="#">[详细]</a>
                    </p>
                </div>
            </li>
            <li class="clear">
                <div class="l pic">
                    <a href="#">
                        <img src="./img2/img.png" alt="">
                    </a>
                </div>
                <div class="l content">
                    <h2>测试标题测试标题</h2>
                    <p>
                        测试段落测试段落测试段落测试段落测试段落测试段落测试段落····
                        <a href="#">[详细]</a>
                    </p>
                </div>
            </li>
            <li class="clear">
                <div class="l pic">
                    <a href="#">
                        <img src="./img2/img.png" alt="">
                    </a>
                </div>
                <div class="l content">
                    <h2>测试标题测试标题</h2>
                    <p>
                        测试段落测试段落测试段落测试段落测试段落测试段落测试段落····
                        <a href="#">[详细]</a>
                    </p>
                </div>
            </li>
        </ul>
    </div>
</body>

-molecule.

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
css基础语法

margin传递问题只会出现在嵌套的结构中，且只有margin-top会有传递的问题，其它三个方向是没有传递问题的。不设置content的现象（宽高不设置的时候，对盒子模型的影响，会自动去计算容器的大小，节省代码）: inline-block(BFC规范)，不推荐，父容器会影响到后面的元素。当设置相同样式时，后面的优先级较高，但不建议出现重复设置样式的情况。出现在上下margin同时出现的时候，会取上下中值较大的作为叠加的值。: clear属性，表示清除浮动的，left、right、both。
复制链接

扫一扫