91_css笔记7_css的布局方式 + 布局案例 + 书写形式概览

最新推荐文章于 2022-01-16 15:52:47 发布

✅_蜡笔小新_✅

最新推荐文章于 2022-01-16 15:52:47 发布

阅读量262

点赞数

本文链接：https://blog.csdn.net/a_horse/article/details/84233257

版权

一，布局方式

网页的布局方式其实就是指浏览器是如何对网页中的元素进行排版的

display 属性（文档流布局），传统盒模型布局方式
1. 按照文档的顺序一个一个显示出来，块元素独占一行，行内元素共享一行
2. display参数设置，来控制显示形式
3. display:none（内容和空间均隐藏）和visibility:hidden（内容隐藏，空间不隐藏）区别
4. display:block -- 显示为块级元素
5. display:inline -- 显示为内联元素
6. display:inline-block -- 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性
position 属性（定位布局），传统盒模型布局方式
1. 通过 position 属性来进行定位
2. absolute
  1. 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
  2. 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
3. fixed
  1. 生成绝对定位的元素，相对于浏览器窗口进行定位。
  2. 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
4. relative
  1. 生成相对定位的元素，相对于其正常位置进行定位。
  2. 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
5. static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
float属性（浮动布局），传统盒模型布局方式
1. 使用 float 属性，使元素脱离文档流，浮动起来
2. 使用clear属性，清除浮动
flex布局（伸缩布局）
1. 弹性盒子
2. display: flex；
grid布局（网格布局）
1. 网格
2. display: grid；

二，布局案例

单列布局
1. 上中下同宽
2. 上下为浏览器宽度，中间没有
双列&三列布局
1. float+margin
2. position+margin
3. 圣杯布局（float+负margin）
4. 双飞翼布局（float+负margin）
5. flex布局

三，css的书写形式

1.行内样式

<p style="color:red">用行内样式编写我的颜色</p>

只适用于<body>（字体颜色和背景颜色）和<body>里面的标签，但不适用于<body>之外的例如:head，title，之类的标签

2.内嵌样式

使用style，把所有样式都写在style里面

<head>

<style>

p{

color:red;

background:blue;

border:1px solid green;

}

</style>

</head>

<body>

<p>用内嵌方式编写我的样式</p>

</body>

3.外链样式

使用link样式连接到外部的.css文件

<head>

　　<link style="stylesheet" href="class.css" type="text/css" />

</head>

4.导入样式

 <style>
        @import "117-abc.css";
 </style>

5，外链样式和导入样式的区别：

相同点: 都是把CSS代码写到了一个单独的文件中

不同点:

写法上，link和import
外链样式会先加载样式, 再显示界面；导入样式会先显示界面, 再加载样式
外链样式是通过HTML标签链接样式；导入样式是CSS2.1新增的, 所以有兼容问题

6，各种样式的优先级

行内样式的优先级最高，其它写法谁写在后面就听谁的

✅_蜡笔小新_✅

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
91_css笔记7_css的布局方式 + 布局案例 + 书写形式概览

一，布局方式网页的布局方式其实就是指浏览器是如何对网页中的元素进行排版的display 属性（文档流布局），传统盒模型布局方式按照文档的顺序一个一个显示出来，块元素独占一行，行内元素共享一行 display参数设置，来控制显示形式 display:none（内容和空间均隐藏）和visibility:hidden（内容隐藏，空间不隐藏）区别 display:block --...
复制链接

扫一扫