CSS 常用属性总结

季布，

于 2021-11-25 11:49:27 发布

阅读量3k

点赞数 2

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/weixin_47906106/article/details/121190420

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

CSS简介

层叠样式表，设置样式规则，控制页面的外观样式

1为什么使用CSS

实现内容与样式的分离
样式复用,便于维护
页面的精准控制，让页面更精美

2.CSS作用

页面美观化
布局和定位

3.CSS语法

<head>
	<style>
	选择器{
	属性名:属性值；
	属性名:属性值；
}
	</style>
</head>

选择器，要修饰的对象
属性名，属性对象的哪个属性(样式)
属性值,样式的取值

4.CSS应用方式
CSS引用方式
有三种方式：内部样式，行内样式，外部样式

4.1 内部样式
也成为内部样式，在页面头部style标签定义
对当前页面中所有符合样式选择器的标签都起作用

    <style>
        p{
            color: red;
            background: #cccc;
        }
    </style>
</head>
<body>
    
    <p>这是第一个段落标签</p>
    <p>这是第二个段落标签</p>
</body>

4.2 行内样式
也成为嵌入样式,使用HTML标签的style属性定义
支队设置style属性的标签起作用

 <p style="background: red;color: blue;">这是第一个段落标签</p>

4.3 外部样式
将css的样式定义在.css文件结尾的文件中，在文件中使用link标签或@import指令引入

1)使用link标签引入样式表

<head>
<link rel="stylesheet" type="text/css" href="css样式文件路径">
</head>

rel=“stylesheet” 固定的属性
type=“text/css” 默认

@import 指令导入外部样式文件

<head>
<style>
 @import "css样式文件的路径";
 @import url(样式文件的路径);
</style>
</head>

实际工作用的第一种较多,直接放在head标签内

1.选择器

1.1 标签选择器
也成为元素选择器,使用HTML标签作为选择器名称，以标签名作为样式应用依据

1.2 类选择器
使用自定义的名称,必须以点号作为前缀，然后通过html标签的class属性调用类选择器，以标签的class属性作为样式应用依据
注意事项

调用时不能添加 . 号
同时调用多个类选择器以空格隔开
类选择器名称不要以数字开头

1.3 ID选择器
使用自定义名称，以#号作为前缀，然后通过HTML标签的ID属性进行名称匹配
以标签的id属性作为样式应用依据,一对一的关系

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 标签选择器 */
        p{
            color: red;
            background: #cccc;
        }
        h2{
            font-size: 30px;
            color: yellow;
        }
        /* 类选择器 */
        .hello{
            background: yellowgreen;
        }
         /* ID类选择器 */
         #random{
            color: blue;
         }
    </style>
</head>
<body>
    
    <p>这是第一个段落标签</p>
    <p class="hello">hello world!</p>
    <h2>标题</h2>
    <h3 id="random">标题1</h3>
</body>
</html>

在这里插入图片描述

1.4 复合选择器
标签选择器和类选择器,标签选择器和ID选择器一起使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1.aaa{
            color: red;
        }
        p#bbb{
            color: blue;
        }
    </style>
</head>
<body>
    <h1 class="aaa">welcome</h1>
    <h4 class="aaa">css</h4>
    <h1>hello</h1>
    <p id="bbb">html</p>
    <p id="bbb">html-html</p>
</body>
</html>

在这里插入图片描述

1.5 组合选择器
将多个具有相同样式的选择器放在一起声明，中间使用逗号隔开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1,h4,p,.aaa{
            color: red;
        }
       
    </style>
</head>
<body>
    <h1 class="aaa">welcome</h1>
    <h4 class="aaa">css</h4>
    <h1>hello</h1>
    <p id="bbb">html</p>
    <p id="bbb">html-html</p>
</body>
</html>

在这里插入图片描述

1.6 嵌套选择器
在某个选择器内再设置选择器,通过空格隔开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div p{
            color: red;
        }
    </style>
</head>
<body>
   
    <p id="bbb">html</p>
    <p id="bbb">html-html</p>

    <div>
        <p>div内部的p标签</p>
    </div>
</body>
</html>

在这里插入图片描述
注：使用空格是不区分是后哪一代的，使用css3中新增的 > 可确定为父子关系才行

 <style>
        div>p{
            color: red;
        }
    </style>

在这里插入图片描述

1.7 伪类选择器
根据不同的状态显示不同的样式，一般多用于a标签
在这里插入图片描述
四种状态可以设置

:link 未访问的链接
:visited 已访问过的链接
:hover 鼠标移动到链接上，即悬浮在链接上显示的状态
:active 当前正在选定的链接，即被激活的链接

注：默认超链接为蓝色，有下划线的效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a:link{
            font-size: 12px;
            text-decoration: none;
            color: black;
        }
        a:visited{
            font-size: 15px;
            color: red;
        }
        a:hover{
            font-size: 20px;
            color: blue;
        }
        a:active{
            font-size: 40px;
            color: green;
        }
    </style>
</head>
<body>
   <a href="#">天气预报</a>
</body>
</html>

也可以这样用

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a:link,a:visited{
            font-size: 13px;
            text-decoration: none;
            color: #666666;
        }
        
        a:active,a:hover{
            text-decoration: underline;
            color: #ff7300;
        }
    </style>
</head>
<body>
   <a href="#">天气预报</a>
</body>

给可以给其他标签使用伪类选择器，只是说一般都是超链接跳转

1.7 伪元素选择器

:first-letter 为第一个字符添加样式
:first-line 为第一行添加样式
:before 在元素内容的最前面添加内容，需配合content属性使用
after 在元素内容的最后面添加内容，需配合content属性使用

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p:first-letter{
            color: red;
            font-size: 30px;
        }
        p:first-line{
            background: pink;
        }
        p:bofore{
        content:"哈哈";
        }
    </style>
</head>
<body>
   <p>
       hello world <br>
       wolcome to
   </p>
</body>

在这里插入图片描述

1.8 选择器的优先级
行内样式>ID选择器>类选择器>标签选择器

原因：首先加载标签选择器，在加载类选择器，然后加载ID选择器，最后加载行内样式。后加载的样式会覆盖先加载的同名样式,互不影响的状态下都生效，有影响才会存在优先级问题

1.9 !important
行内样式>ID选择器>类选择器>标签选择器如果存在冲突的情况下非让行内样式优先级最高，可以加!importent
可以使用这个让标签的优先级达到最高

 <style>
        p:first-letter{
            color: red!importent;
            font-size: 30px;
        }
        p:first-line{
            background: pink;
        }
        p:bofore{
        content:"哈哈";
        }
    </style>

2.常用CSS属性

字体属性
定义字体样式属性

属性	含义	说明
font-size	大小,尺寸	可以使用多种单位
font-weight	粗细
font-famply	字体
font-style	样式

2.1 font-size
取值：

inherit 如果所在当前标签没设置字体大小，默认继承的是父标签属性。所有css属性默认都继承
px 像素
%百分比，相对于父标签大小的百分比
em倍数相对于父标签字体大小的倍数

HTML 根元素默认字体大小为16px，也成为基础字体大小

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            font-size: 62.5%;  /*相当于设置为10px,body的父标签是html默认为16px   16*62.5%=10*/
        }
    </style>
</head>

2.2 font-weight 字体粗细
取值

nomal 普通
bold 粗体
自定义 400 nomal 700 bold

2.3 font-family 字体
要求系统中安装了相应的字体
一般建议选三中：首选，其次，备用以逗号分开

2.4 font-style
取值

nomal 正常
italic 斜体

2.5 font 简写
简写属性
font :font-style font-weight font-size font-family
必须按次顺序书写，如果所写不是全部，可以设置默认值，因为少些会有影响

文本属性

属性	含义	说明
color	颜色
line-height	行高	行之间的高度
text-align	水平对齐方式	left center right
certical-align	垂直对齐方式	top middle bottom 图片文字的对齐方式
text-indent	首行缩进
text-decoration	文本修饰	underline,overline,line-through
text-transform	字母大小写	lowercase,upporcase,capitalize(首字母大写)
letter-spacing	字符间距	字符和字符之间的距离
word-spacing	单词间距	只对单词有效
white-space	空白的处理方式	文本超出后是否换行(默认自动换行),nowrap
overflow	超出后隐藏不显示	取值:hidden

3.1 color
取值

颜色名称，英文单词
16进制的RGB
rgb 函数每个颜色的取值范围[0,255] rgb(red,green,blue)
rgba函数 rgb(red,green,blue,alpha) alpha可设置透明度，取值范围是[0,1] 0表示完全透明，1表示完全不透明

背景属性

属性	含义	说明
background-color	背景颜色
background-image	背景图片
background-repead	背景图片的重复方式
background-position	背景图片显示的位置
background-attachment

background-color
取值:
transparent:透明

background-image|

background-image:url('路径')

在这里插入图片描述

必须使用url()指定图片路径
如果此时在.css文件中使用相对路径，此时是相对于css文件

background-repeat

repeat (默认) 横向纵向都会重复，直至把区域填满
repeat-x 横向重复.
repeat-y 纵向重复
no-repeat 不重复

background-position
，默认背景图片显示在左上角

关键字 top,bottom,right,left,center
作标左上角为(0,0)作标因为这是背景的初始默认位置,向右为x正方向,向下为y正方形

CSS雪碧图即CSSsprits,也称CSS精灵，是一种CSS图像合成技术
含义：将网页中很多小的图片整合到一张大的图片中,当访问该页面时只需要下载一次,可以减少访问服务器的次数
原理：使用background-position进行背景定位

background-attachment|

scroll(默认) 跟随页面的内容滚动
fixed 图片固定不动

div{
    background-color: #ccc;
    background-image: url(../images/m.jpg);
    background-repeat: no-repeat;
    background-position: right top;
    height: 1000px;
    background-attachment: fixed;
}
.cart{
    width: 300px;
    height: 300px;
    /* background-image: url(../images/m.jpg); */
    background-position: -160px,-20px;
}

列表属性

属性	含义	说明
list-style-type	设置列表前的标记
list-style-images	将图像作为列表前的标记

list-style-type
取值:none,disc,circle,square,decimal

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li{
        list-style-type: decimal;
        }
    </style>
</head>
<body>
   <ul>
       <li class="first">Hello World</li>
       <li class="second">Hello World</li>
       <li class="third">Hello World</li>
       <li class="fourth">Hello World</li>
   </ul>
</body>

在这里插入图片描述

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .nav li{
            list-style:none; /*列表前为空*/
            float: left;
            width: 100px;
        }
    </style>
</head>
<body>
    <nav>
   <ul class="nav">
       <li class="first">新闻</li>
       <li class="second">贴吧</li>
       <li class="third">知道</li>
       <li class="fourth">视频</li>
   </ul>
</nav>
</body>

在这里插入图片描述

表格属性
border-collapse表格中相邻的边框是否合并为单一边框

separate (默认)
collapse

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table{
            width: 500px;
            /* border:1px solid red */
            border-collapse: collapse;
        }
        td{
            border:1px solid red
        }
    </style>
</head>
<body>
   <table  bordercolor="red" cellpadding="0px" cellspacing="0px">
       <tr>
           <td>td1</td>
           <td>td1</td>
           <td>td1</td>
           <td>td1</td>
       </tr>
       <tr>
        <td>td1</td>
        <td>td1</td>
        <td>td1</td>
        <td>td1</td>
       </tr>
   </table>
</body>

盒子模型

在这里插入图片描述

1.盒子模型是网页布局的基础,将页面所有的元素都看作是一个盒子,盒子都包含以下几个属性。

width 宽度
height 高度
boder 边框
padding 内边距(内容和边框之间的举例)
margin 外边距 (边框与边框之间的举例,盒子与盒子之间的举例)

2.盒子属性
2.1 border
表示盒子的边框
分为四个方向
1)top,left,right,bottom
2)border-top,border-right,border-left,border-bottom
每个边分为三种样式
颜色color,粗细width,样式style
1)border-top-color,border-top-width,border-top-style
2)border-right-color,border-right-width,border-right-style
3)border-bottom-color,border-bottom-width,border-bottom-style
4)border-left-color,border-left-width,border-left-style

样式style的取值
solid实现,dashed虚线,dotted点线,double双线,inset内嵌3D线,outset外嵌3D线
在这里插入图片描述
可简写：书写顺序:top,right,bottom,left

padding
盒子的内边距，即内容与边框之间的举例

margin
盒子的外边距,即盒子与盒子之间的举例

<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 {
            width: 200px;
            background: #ccc;
        }
        
        #first {
            /*块级元素水平居中,一定要设置宽度才能居中*/
            color: red;
            margin: 0 auto;
            /*文本水平居中*/
            text-align: center;
            /*垂直居中*/
            height: 100px;
            line-height: 100px;
        }
    </style>
</head>

<body>
    <p id="first">welcome to</p>
</body>

元素所占空间
页面中的元素实际所占空间

宽=width+左右padding+左右border+左右margin
高=height+上下padding+上下border+上下margin

 <style>
        p {
            width: 250px;
            background: #ccc;
        }
        
        #first {
            border: 1px solid red;
            padding: 20px;
            margin: 10px;
        }
    </style>

- 在这里插入图片描述

盒子属性的默认值
不同标签的盒子属性默认值可能不同,需要自己设置

外边距合并
也成为外边距折叠，指两个块级元素垂直外边距相遇时，会合并成一个外边距，合并后的外边距的值为两个相遇外边距较大的那个。

定位方式
通过position属性实现对元素的定位，有四种定位方式

属性	含义	说明
static	默认值	按常规的方式显示
relative	相对定位	相对于原来的位置进行定位
absolute	绝对定位	相对于第一个非static定位的父标签的定位
fixed	固定定位	相对于浏览器窗口进行定位

设置定位方式后,还要设置定位属性(偏移量):top,left,bottom,right

1.相对定位
先设置元素的position为relative,然后再设置偏移量

<style>
        #container {
            width: 800px;
            border: 1px solid #000;
        }
        
        .div1,
        .div2,
        .div3,
        .div4 {
            width: 100px;
            height: 50px;
        }
        
        .div1 {
            background: red;
            position: relative;
            top: 20px;
            left: 50px;
        }
        
        .div2 {
            background: blue;
        }
        
        .div3 {
            background: green;
        }
        
        .div4 {
            background: greenyellow;
        }
    </style>
</head>

<body>
    <div id="container">
        <div class="div1">div1</div>
        <div class="div2">div2</div>
        <div class="div3">div3</div>
        <div class="div4">div4</div>
    </div>
</body>

在这里插入图片描述
这是相对于原来的位置产生的偏移量

2.绝对定位
先设置其父标签为非staitic定位,然后设置元素的position属性为absolute,然后设置偏移量。
注意事项：

一般来说就是将其父标签设置为非static定位
如果其父标签不是非static定位，会以浏览器窗口进行定位
设置元素为绝对定位后，元素会浮在页面上

<style>
        #container {
            width: 800px;
            border: 1px solid #000;
            position: relative;
        }
        
        .div1,
        .div2,
        .div3,
        .div4 {
            width: 100px;
            height: 50px;
        }
        
        .div1 {
            background: red;
            position: relative;
            top: 20px;
            left: 50px;
        }
        
        .div2 {
            background: blue;
            position: absolute;
            right: 50px;
            bottom: 50px;
        }
        
        .div3 {
            background: green;
        }
        
        .div4 {
            background: greenyellow;
        }
    </style>
</head>

<body>
    <div id="container">
        <div class="div1">div1</div>
        <div class="div2">div2</div>
        <div class="div3">div3</div>
        <div class="div4">div4</div>
    </div>
</body>

在这里插入图片描述

3.固定定位
先设置position属性为fixed，再设置偏移量
在这里插入图片描述
4.z-index
设置元素定位方式以后,元素会浮在页面的上方，此时可以通过z-index属性设置有限制，控制元素的堆叠顺序。取值为数字，值越大优先级越高，默认为auto，大多数浏览器默认为0
注：只能给非static定位的元素设置z-index属性

    <style>
        #container {
            width: 800px;
            border: 1px solid #000;
            position: relative;
        }
        
        .div1,
        .div2,
        .div3,
        .div4 {
            width: 100px;
            height: 50px;
        }
        
        .div1 {
            background: red;
            position: relative;
            top: 20px;
            left: 50px;
            z-index: 5;
        }
        
        .div2 {
            background: blue;
            position: absolute;
            left: 100px;
            bottom: 50px;
        }
        
        .div3 {
            background: green;
            position: fixed;
            bottom: 50px;
            left: 100px;
        }
        
        .div4 {
            background: greenyellow;
        }
    </style>
</head>

<body>
    <div id="container">
        <div class="div1">div1</div>
        <div class="div2">div2</div>
        <div class="div3">div3</div>
        <div class="div4">div4</div>
    </div>
</body>

在这里插入图片描述

其他CSS属性

1.浮动和清除

通过float属性实现元素有浮动,可以让块级元素脱离常规文档流，向左或向右移动，在同一行显示，如果一行显示不下则会换行
常用取值:

left 左浮动
right 右浮动
none 不浮动，默认

设置float属性后，元素会浮在页面上层，此时父容器已无法计算自己的尺寸，通常会在容器末尾添加一个清除float的空div来解决

2.清除属性
通过clear属性实现清除，设置属性的哪一侧不允许有浮动元素，目的是和其他浮动元素换行隔开，支队块级元素有效
取值：

left 左侧不允许有浮动元素
right
both 两侧不允许有浮动元素
none 允许两侧有浮动元素，默认

<style>
        #container {
            /* width: 800px; */
            border: 1px solid #000;
        }
        .div1,
        .div2,
        .div3,
        .div4 {
            width: 300px;
            height: 50px;
        }
        
        .div1 {
            background: red;
            float: left;
  
        }
        
        .div2 {
            background: blue;
            float: left;
         
        }
        
        .div3 {
            background: green;
            float: left;
          
        }
        
        .div4 {
            background: greenyellow;
            float: left;
        }
        .cls{
            clear: right;
        }
    </style>
</head>
<body>
    <div id="container">
        <div class="div1">div1</div>
        <div class="div2">div2</div>
        <div class="div3">div3</div>
        <div class="div4">div4</div>
        <div class="=cls">aaa</div>
    </div>
</body>

在这里插入图片描述
结论：
1）对于非浮动元素两边都可以清楚
2）对于浮动元素，向哪边浮动就只能设置哪边清楚

3.元素的显示和隐藏
通过display属性设置元素是否显示，以及是否独占一行
常用取值

取值	含义	说明
none	不显示
inline	显示内联元素，行级元素默认值	将块级元素变成行级元素不再独占一行
block	显示为块级元素，块级元素的默认值	将行级元素变为块级元素
inline-block	显示为内联元素，但可以设置宽和高	在inline基础上允许设置宽和高

注：行级元素默认无法设置宽和高,可以为行级元素设置display:inline-block,然后可以设置宽和高了

inline

<head>
    <style>
        .div1{
            width: 100px;
            height: 100px;
            background: blue;
            /* display: none; */
            display: inline;
        }
    </style>
</head>
<body>
    <div class="div1">div1</div>
    <span>span1</span>
</body>

block

<head>
    <style>
        .div1{
            width: 100px;
            height: 100px;
            background: blue;
            /* display: none; */
            /* display: block; */
        }
        span{
            width: 100px;
            height: 100px;
            background: yellow;
            display: block;
        }
    </style>
</head>
<body>
    <div class="div1">div1</div>
    <span>span1</span>
</body>

在这里插入图片描述

visibility
也可以通过visibility属性设置元素的显示和隐藏
visiable 显示
hidden 隐藏

visibility：hidden和display:none 区别

<head>
    <style>
        #p_1{
            width: 100px;
            height: 100px;
            background: blue;
            visibility: hidden;
        }
        #p_2{
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
</head>
<body>
   <p id="p_1">111</p>
   <p id="p_2">222</p>
</body>

visibility: hidden;
在这里插入图片描述
display:none

区别：
display隐藏时不再占据页面中空间，后面的元素会占用其位置
visibility隐藏时会占据页面中空间，位置还保留在页面中，只是不显示

4.轮廓属性
轮廓属性outline,用于在元素的周围绘制一个轮廓，位于border的外围，可以突出显示元素
常用属性：

outline-width 轮廓的宽度
outline-color 轮廓的颜色
outline-style 轮廓的样式
outline 简写

在浏览器中，当鼠标点击或使用tab键让一个表单或链接获取焦点时，该元素有一个轮廓outline
优点：可以提高使用表单的用户体验

<head>
    <style>
        span{
            border: 2px solid red;
            outline-width: 4px;
            outline-color: blue;
            outline-style: dashed;
        }
        .username{
            border: 1px solid red;
            outline:none ;
        }
    </style>
</head>
<body>
    <span>welcome to css</span>
    <hr>
    用户名：<input type="text" class="username">
</body>

在这里插入图片描述

5 其他属性
宽和高相关的

max-width 设置元素的最大宽度
min-width 设置元素的最小宽度
max-height 设置元素的最大高度
min-height 设置元素的最小高度

overflow属性
当元素内容溢出时该如何处理

visible 溢出时可见，显示在元素的外面，默认值
hidden 溢出部分不可见(常用)
scroll 无论是否溢出始终出现滚动条
auto 溢出时自动出现滚动条

<head>
    <style>
       div{
            border: 1px solid blue;
            width: 200px;
            height: 100px;
            overflow: scroll;
        }
    </style>
</head>
<body>

    <div>
        吃饭吃饭吃饭吃饭吃饭吃饭吃饭吃饭吃饭吃饭吃饭吃饭吃饭吃饭吃饭吃饭吃饭
        吃饭吃饭吃饭吃饭吃饭吃饭吃饭吃饭吃饭吃饭吃饭吃饭吃饭吃饭吃饭吃饭吃饭
        吃饭吃饭吃饭吃饭吃饭吃饭吃饭吃饭吃饭吃饭吃饭吃饭吃饭吃饭吃饭吃饭吃饭
    </div>
</body>

在这里插入图片描述

cursor 属性
设置光标的形状
常用属性：

detault 属性一般为箭头
pointer 手的形状
move 表示可移动

页面的布局

常见页面布局

表格布局
div布局

1.表格布局
不适用于复杂的布局，仅适用于简单的有规则的结构
定位相对准确，与浏览器基本无关，使用简单分隔

1.1 用法
table 常用样式属性

border 在表格外围设置边框
border-spacing 设置单元格之间的距离(相当于table标签的celspacing属性)
border-collapse 表格中相邻边框是否合并.取值:seprate,collapse

<style>
        .hello {
            width: 80%;
            border: 1px solid #ccc;
            border-spacing: 0;
            border-collapse: collapse;
        }
        
        .hello th,
        .hello td {
            border: 1px solid #ccc;
            padding: 5px;
        }
    </style>
</head>
<body>
    <table class="hello">
        <thead>
            <tr>
                <th>th1</th>
                <th>th2</th>
                <th>th3</th>
                <th>th4</th>
            </tr>

        </thead>
        <tbody>
            <tr>
                <td>td1</td>
                <td>td2</td>
                <td>td3</td>
                <td>td4</td>
            </tr>
            <tr>
                <td>td1</td>
                <td>td2</td>
                <td>td3</td>
                <td>td4</td>
            </tr>
            <tr>
                <td>td1</td>
                <td>td2</td>
                <td>td3</td>
                <td>td4</td>
            </tr>
        </tbody>
    </table>
</body>

在这里插入图片描述

div 布局
定位绝对准确,使用灵活,适用于复杂的布局方式

简单布局
两种形式

1-1-1 布局

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="test.css/style.css">
</head>
<body>
    <div id="container">
        <header class="header">
            header
        </header>
        <article class="main">
            main
        </article>

        <footer class="footer">
            footer
        </footer>
    </div>
</body>
</html>

@charset "utf-8";

body{

    margin: 0;
    padding: 0;
}

#container{
    width: 980px;
    border: 1px solid #ccc;
    margin: 0 auto;
}
#container .header{
    width: 100%;
    height: 80px;
    background: red;
    
}

#container .main{
    width: 100%;
    height: 600px;
    background: blue;
    /* margin-top: 10px; */
    margin: 10px 0;
}

#container .footer{
    width: 100%;
    height: 120px;
    background: green;
    /* margin-top: 10px; */
}

在这里插入图片描述

1-2/3 布局

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="test.css/style.css">
</head>
<body>
    <div id="container">
        <header class="header">
            header
        </header>

        <article class="wrapper">
           <!-- <aside>
               left aside
           </aside> -->
           <section class="main">
                main
           </section>
           <aside>
               right aside 
           </aside>
        </article>

        <footer class="footer">
            footer
        </footer>
    </div>
</body>
</html>


@charset "utf-8";

body{

    margin: 0;
    padding: 0;
}

#container{
    width: 980px;
    border: 1px solid #ccc;
    margin: 0 auto;
}
#container .header{
    width: 100%;
    height: 80px;
    background: red;
    
}

#container .wrapper{
    width: 100px;
    height: 600px;
    background: honeydew;
    margin: 10px 0;
}

#container .wrapper aside{
    background: pink;
    width: 200px;
    height: 400px;
    float: left;
}
#container .wrapper .main{
    
    background: blue;
    width: 770px;
    height: 600px;
    float: left;
    /* margin: 0 10px ; */
    margin-right: 10px;
}
#container .footer{
    width: 100%;
    height: 120px;
    background: green;
    /* margin-top: 10px; */
}

圣杯布局
页面结构，两边的边栏宽度固定,中间主体在一定范围内自适应，并且主题有限加载。
一般防止页面缩放的太小影响页面浏览，都会为页面设置一个最小宽度，窗口缩小超过的宽度会隐藏，都会为页面设置一个最小宽度min-width

<!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>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <article id="wrapper">

        <section class="main">
            main
        </section>
        <aside class="left">
            left aside
        </aside>
        <aside class="right">
            right aside
        </aside>
    </article>
</body>

</html>

@charset "utf-8";

/*
父容器
1.溢出隐藏
2.设置容器内边距，空出位置放置左右两个侧边栏
*/

#wrapper {
    overflow: hidden;
    padding: 0 200px;
    min-width: 300px;
    border: 1px solid #ccc;
}


/*
主题
1.宽度自适应
2.浮动布局
*/

#wrapper .main {
    width: 100%;
    height: 300px;
    background: green;
    float: left;
}


/*
边栏
1.边栏宽度比容器内边距小10px，用来实现与主体隔开
2.浮动布局
*/

#wrapper aside {
    width: 190px;
    height: 300px;
    background: blue;
    float: left;
    position: relative;
}
/*
左边栏
1.移动到主内容位置:主内容自适应，宽度为100%。所以使用相对值100%
2.再移动到左边 使用相对定位
*/

#wrapper .left {
    margin-left: -100%;
    left: -200px;
}
#wrapper .right {
    margin-left: -190px;
    left: 200px;
}