CSS03布局

已于 2022-07-21 21:21:01 修改
阅读量117 收藏
点赞数
文章标签： css css3 html
于 2022-07-21 10:07:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41225951/article/details/125906460
版权

title: CSS03Layout
date: 2022-01-22 00:09:16
tags: Layout 布局

布局（Layout）

文档流（normal flow）

  • 网页是一个多层的结构，一层落着一层

  • 通过CSS可以为每一层来设置样式，作为用户来讲只能看到最顶上的一层

  • 最底下的一层我们称为文档流，文档流是网页的基础

    • 我们所创建的元素默认都是在文档流中进行排列

  • 对于我们来说，元素主要有两个状态，在文档流中和脱离文档流

元素在文档流中的特点

块元素

块元素在页面中独占一行，自上向下垂直排列

默认宽度是父元素的全部，会把父元素填满。

默认高度被子元素撑开

.box1{
            background-color:red;
        }
 <div class="box1">我是div1</div>

行内元素

行内元素不会独占一行，只占自身大小，自左向右水平排列

如果一行之中不能容下所有的行内元素，元素会换到第二行继续自左向右排列，和人类书写习惯一致。

行内元素的默认长度和宽度都是被内容撑开

盒模型（box model）

CSS将页面的所有元素都设置成了一个矩形的盒子。

对网页的布局等同于将不同的盒子摆放到不同的位置，即可完成对网页的布局。

盒子组成部分

  • 内容区（content）
  • 内边距（padding）：内容区和边框之间的距离
  • 边框（border）

内容区+内边距+边框->盒子大小

  • 外边距（margin）：两个盒子之间的距离

外边距->盒子位置

内容区（content）

内容区：元素中的所有子元素和文本内容都在内容区中排列，内容区的大小由width和height来设置

            width: 200px;
            height: 200px;
            background-color: rosybrown;

边框(border)

边框属于盒子的边缘，边框里面属于盒子内部，出了边框都是盒子的外部
设置边框最少设置三个样式
边框宽度：border-width
边框颜色：border-color
边框样式：border-style
边框大小会影响到盒子的大小

            border-width:10px;
            border-color:royalblue;
            border-style:solid;
border-width

border-width可以省略不写，因为有一个默认值是3px

border-width可以用来指定四个方向的像素

如果写四个值，则顺序为上右下左

如果写三个值，则顺序为上（左右）下

如果写两个值，则顺序为（上下）（左右）

如果写一个值，则默认都是这个值

border-width:10px 20px 30px

除了border-width，还有一组border-XXX-width，用来单独指定某一个边的宽度

border-top-width

border-bottom-width

border-left-width

border-right-width

border-color

用来指定边框的颜色，规则和border-width一样

border-color也可以省略不写，如果不写，则自动使用color颜色

其实color是前景色，字体颜色和边框都使用前景色

border-style

用来指定边框的样式，规则还是和之前一样

solid：实线

dotted：点状虚线

dashed：线状虚线

double：双线

边框简写属性

border: 10px solid orange;

没有顺序要求

border-XX

border-top

border-bottom

border-left

border-right

内边距（padding）

一共有四个方向的内边距

padding-top

padding-right

padding-bottom

padding-left

内边距的设置会影响到盒子大小

背景颜色会延伸到内边距上

问题是：内容区和内边距的区分不明显->通过写个内容可以区分

还可以这样解决：设置一个inner

 <style>
        .box1{
            background-color: #ffa;
            width: 200px;
            height: 200px;
            border:10px #bcf solid;
            padding-top: 10px;
            padding-left:10px;
            padding-bottom: 10px;
            padding-right: 10px;
        }
        .inner{
            /*此时inner占的是内容区的100%*/
            background-color: red;
            width:100%;
            height:100%;
        }
    </style>

<body>
    <div class="box1">
        <div class="inner"></div>
    </div>

一个盒子可见框的大小是由内容区+边框+内边距共同决定。

padding: 可以同时指定四个方向的大小

外边距（margin）

不会影响盒子可见框的大小但是会影响位置（和其他盒子隔多远），实地占地范围

margin-top：上外边距 元素向下移

margin-right：默认情况下设置margin-right不会产生任何效果

margin-bottom：下外边距 让别的元素向下

margin-left：左外边距 元素向右移

元素在页面中按照自左向右排列，所以默认情况下，如果我们设置的是上和左外边距，元素会移动自己，而设置下和右外边距，元素会移动别人。

margin也可以设置负值，如果是负值，元素会向相反方向移动。

margin：同时设置四个方向外边距

margin会影响到盒子实际占用空间的大小

盒子布局

盒子水平布局

元素水平方向的布局：

​ 元素在其父元素中水平方向的位置由以下几个属性共同决定

​ margin-left

​ border-left

​ padding-left

​ width

​ padding-right

​ border-right

​ margin-right

过渡约束

​ 一个元素在其父元素中，水平布局必须满足以下的等式

​ margin-left+border-left+padding-left+width+padding-right+border-right+margin-left=父元素内容区的width

​ 以上等式必须满足，如果相加结果使等式不成立，则成为过渡约束，则等式会自动调整

  • 如果值没有auto，则浏览器会自动调整margin-right部分以使等式满足
<style>
	.outer{
		background-color:green;
		width:800px;
		height:200px;
		border:10px red solid;
	}
	.inner{
		background-color:red;
		width:200px;
		height:200px;
	}
</style>
<div class="outer">
	<div class="inner"></div>
</div>

此时margin-left+border-left+padding-left+width+padding-right+border-right+margin-right=0+0+0+200+0+0+0≠800

则会自动调整margin-right=600

  • 有三个值可以设置成auto，分别是width margin-left margin-right(其中width的值默认就是auto)
  • 如果某个值为auto，会自动调整为auto的那个值以使等式成立

eg.

<style>	
	.outer{
            width: 800px;
            height: 200px;
            border:10px red solid;
        }
        .inner{
            width:auto;
            height:180px;
            border:10px blue solid; 
            background-color: rosybrown;
            margin-right:200px;
        }
 </style>
 <body>
 	<div class=outer> <div class=inner> </div> </div>
 </body>

  • 如果将一个宽度和一个外边距同时设置为auto，那么这个外边距自动为0

  • 如果将三个值都设置为auto，则外边距都是0，宽度最大

  • 如果将两个外边距设置为auto，width有值，则两个外边距值相同

    • 我们经常用这个特性来设置居中，即指定width一个值，两个外边距auto

    width: xxpx

    margin: 0 auto;(垂直为0，水平居中)

    如果加值超过了，比如设置了width为1000，那么这个时候就会设置margin-right=-200。颜色会超出但是margin-right=-200。再有元素放到该元素左边时，只会和父元素挨到一起，因为子元素实际大小为800。

盒子垂直布局

如果父元素没有设置高度，那么内容区会直接被子元素的高度撑开。

.outer{
    background-color: aquamarine;
}
.inner{
    background-color: bisque;
    height: 200px;
    width: 200px;
    margin-bottom: 200px;
}

如果父元素设置了高度，溢出了，处理办法：overflow

四个属性：visible,hidden,scroll,auto

.outer{
    background-color: aquamarine;
    border-color:black;
    border-style: solid;
    border-width: 20px;
    /* 如果inner的高度超过了outer的高度，可以用overflow来调节
overflow 4个属性
visible：能看见
hidden：直接砍掉
scroll：横竖滚轴
auto：设置横竖滚轴，如果不需要横向自动不设置横向滚轴，如果不需要竖向自动不设置竖向滚轴
auto-x：设置横向溢出
auto-y：设置竖向溢出
*/
    height:200px;
    overflow: auto;
}
.inner{
    background-color: bisque;
    height: 200px;
    width: 200px;
    margin-bottom: 200px;
}
<body>
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3">
      <div class="box4"></div>
  </div>
</body>
外边距的折叠

外边距在垂直方向分为兄弟元素折叠和父子元素折叠。兄弟元素折叠是对于编程有利的，不需要处理。父子元素折叠对编程不利，需要处理。具体处理方法之后补充。

/* 相邻的垂直方向外边距会发生折叠
兄弟元素 垂直外边距
    -会取两者之间的较大值（两者都是正值）
    -特殊情况：如果相邻外边距一正一负，取两者和
    两者都为负，取绝对值较大的
    兄弟之间的折叠有利于我们开发，所以不需要处理
父子元素 垂直外边距
    -父子元素的相邻外边距，子元素的会传递给父元素（上外边距）
*/
.box1{
    background-color: aqua;
    height: 200px;
    width: 200px;
    margin-bottom: 10px;
}
.box2{
    background-color: aqua;
    height: 200px;
    width: 200px;
    margin-top: 10px;
}
/* 带着父元素一起向下了，这是因为子元素和父元素的外边距重合了。处理办法：1.可以不用外边距 2.将两者的外边距分开 但这都不是最好的处理办法，好的处理办法之后再讲*/
.box3{
    background-color: aqua;
    height: 200px;
    width: 200px;
     /*2.将两者的外边距分开*/
     /*
    height:199px
    padding-top:1px;*/
}
.box4{
    background-color: blue;
    height: 20px;
    width: 20px;
    margin-top:10px;
    /* 1.可以不用外边距*/
    /* border-top-width:20px;
    border-style:solid;
    border-color:rgba(2, 3, 4, 0); */
     /*2.将两者的外边距分开*/
     /*height:19px*/    
}

行内元素盒模型

/* 行内元素不支持设置宽度和高度
行内元素可以设置padding，但是垂直高度的padding不会影响页面的布局
行内元素可以设置设置border，同样，垂直方向的border不会影响垂直方向的布局
行内元素可以设置设置margin，同样，垂直方向的border不会影响垂直方向的布局
*/

/* 超链接的宽高设置，display属性，用来设置元素显示的类型
可选值：
    inline 设置成行内元素
    block 设置成块元素
    inline-block 将元素设置为行内块元素
        行内块，可以设置高度和宽度但是又不会独占一行
    table 将元素设置为表格
    none 元素不在页面中显示

visibility用来显示元素的显示状态
可选值：
    visible 不会影响
    hidden 内容会没有 但是位置依然会保留
*/
span{
    background-color: red;
    width:100px;
    height: 100px;
    display:block;
    visibility:hidden;
}
a{
    background-color: yellowgreen;
    width: 100px;
    height: 100px;
    padding:100px;
    border:100px red solid;
    display:block;
}

.box1{
    background-color: aqua;
    width:600px;
    height: 600px;
}
<body>
    <span>span1</span>
    <span>span2</span>
    <a href="javascript:;">超链接</a>
    <div class="box1"></div>
</body>

浏览器的默认样式

默认样式：

​ -浏览器都会为元素设置一些默认样式，以避免没有css的时候，什么都显示不出来
​ -默认样式的存在会影响页面的布局
通常情况下编写网页的时候必须要去除默认样式，在网页中可以点击f12可以查看各盒子的样子

下面展示了三种方法：

<!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>
	/* 
          3.重置样式表，用的最多  
        */
    <!-- <link rel="stylesheet" href="./css_reset/reset.css"> -->
    <link rel="stylesheet" href="./css_reset/normalize.css">
    <!-- 重置样式表，专门用来对浏览器的样式进行重置
        reset.css是所有都重置，网址：http://meyerweb.com/eric/tools/css/reset/ 
        normalize.css是对默认样式进行统一，网址：github.com/necolas/normalize.css
    -->
    <style>
        /* 
          1.手动去除  
        */
        body{
            margin:0px;
        }
        p{
            margin:0px;
        }
        ul{
            margin:0px;
            padding:0px;
            这个是去除list前面的点的
            list-style: none;
        }
        /* 
		2.通配去除
		但是通常太多标签有默认样式了，我们都不希望他们有padding和margin，所以可以用通配选择器统一设置
		但是依旧会有遗漏，所以我们一般采用方法3*/
        *{
            padding:0;
            margin:0;
        }
        ul{
            list-style: none;
        }
        
        .box1{
            border:1px black solid;
            padding:1px;
            width:200px;
            height:200px;
        }
       
    </style>
</head>
<body>
    <div class="box1"></div>
    <p>文字</p>
    <p>文字</p>
    <p>文字</p>
    <p>文字</p>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>
</html>

盒子尺寸

一般情况下的盒子尺寸是border+padding+content,但可以设置成不一样的
box-sizing 2个属性
1.content-box 默认属性 尺寸是order+padding+content,height和width表示的是content的大小
2.border-box 尺寸是order+padding+content=height或width。height和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_reset/reset.css">
    <style>
        /* 一般情况下的盒子尺寸是border+padding+content,但可以设置成不一样的
            box-sizing 2个属性
            1.content-box 默认属性 尺寸是order+padding+content,height和width表示的是content的大小
            2.border-box  尺寸是order+padding+content=height或width。height和width表示的是整个盒子的大小      
        */
        .box1{
            background-color: antiquewhite;
            box-sizing:border-box;
            height:200px;
            width:200px;
            padding:10px;
            border:10px red solid;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>

圆角，阴影，外轮廓

外轮廓：outline

和border的写法一样 outline: 10px red solid; 不同的是，它不会影响布局

阴影：box-shadow

不会影响布局

四个值

第一个值是颜色 第二个值是水平偏移量 第三个值是垂直偏移量 第四个值是羽化半径

圆角：border-radius 指的是角的半径

用法 设置四个角：

border-radius: 20px 30px 40px 50px;

设置单独的角 椭圆 两个值分别是水平半径和垂直半径：

border-top-left-radius: 20px 30px;

设置四个角为椭圆：

border-radius: 20px / 30px;

设置为圆：

border-radius: 50%;

<!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-color: bisque;
            /* border:10px red solid; */
            /* 轮廓 用来设置元素的轮廓线，用法和border一样，就是不会影响到可见框的大小，一般用来设置鼠标移入的时候轮廓变化 */
            /* outline:10px red solid; */
            /* 阴影 用来设置元素的阴影效果 也不会影响布局 第一个是水平偏移量 正值就往右侧移动 第二个值是垂直偏移量 正值向下 负值向上 第三个值是阴影的模糊半径*/
            box-shadow: rgba(0, 0, 0, 0.3) 10px 10px 10px;
            /* 设置圆角 设置的是半径大小 border-top-left-redius... */
            border-radius: 10px 20px 30px 40px;
            /* 设置椭圆圆角 第一个是水平半径 第二个是垂直半径*/
            border-top-left-radius: 40px 50px;
            /* border-radius设置椭圆 */
            border-radius:40px / 50px;
            /* 设置圆形 */
            border-radius:50%;
        }
        .box1:hover{
            outline:red 10px solid;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <span>span</span>
</body>
</html>
霄雨Blog
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css 上下布局 flex,Css Flex布局
weixin_36398921的博客
08-03 3055
Flex布局是Css3中新加入的额外布局系统。传统布局基于盒模型，依赖“display”、“position”、“float”属性，对于特殊布局非常不便。因此2009年，W3C提出新的布局方案-Flex布局，但由于浏览器兼容问题，Flex布局并没有大范围铺开。实现Flex布局的条件1.必须有一个父级容器作为Flex容器(作为容器)·定义一个Flex容器.box{ display: flex; }2...
CSS父元素被子元素撑大，另外子元素高度百分比不生效
qq_52070860的博客
08-31 890
看一下显示的效果：发现child2虽然有height:100%，但是实际高度是0px，说明height:100%未生效；看一下显示的效果：发现child2的height:100%生效了。
CSS子元素撑满父元素（height: 100%无效）
热门推荐
weixin_43260489的博客
03-09 1万+
原因分析 明确一点：子元素设置height: 100%需要父元素有确定的高度； 如果父元素高度是被子元素②撑起来的，此时我们想让子元素①撑满高度，height: 100%无效。 解决办法 父元素： position: relative; 子元素： position: absolute; top: 0; width: 100%; height: 100%; ...
css多种布局方式
博哥的二进制世界
05-14 1603
常见布局有 标准流布局、弹性布局、表格布局、流体布局、网格布局、混合布局、定位布局、浮动布局等，我会从文档流，容器，效果这些角度介绍文章引导1. 标准流布局2. 浮动布局3. 定位布局4. 弹性布局5. 网格布局6. 多列布局7. 响应式布局。
CSS实现两列布局
zxl1990_ok的博客
11-17 2290
左列宽固定，右列自适应 效果如下： 利用float + margin <style> .left { background-color: red; width: 200px; height: 500px; float: left; } .right { background-color: green; margin-left: 200px; /* 大于或等于左列宽度 */ height: 500px; } .
css弹性布局
javajy的博客
05-01 2744
row-reverse：主轴方向为水平方向，起点在右端。row(默认)：主轴方向为水平方向，起点在左端。column-reverse：主轴方向为垂直方向，起点在下边。wrap-reverse：换行，第一行在下方。space-between：两端对齐，中间元素间隔相等。flex-start（默认值）：轴起点对齐。column：主轴方向为垂直方向，起点在上边。space-evenly：每个元素两侧的间隔相等。flex-end：轴终点对齐。flex-end：轴终点对齐。space-around：分散对齐。
Css 粘性布局
前端开发小白9527
04-01 1811
CSS中position属性（sticky）详细参见菜鸟教程: sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。 position: sticky; 基于用户的滚动位置来定位。粘性定位的元素是依赖于用户的滚动，也就是说在position:relative 与 position:fixed 定位之间切换。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。元素定位表现为在跨越特定阈值前为相对定位
css常见布局
liwei26的博客
01-04 5109
基础版 1.两列布局 两列布局是一侧固定，另一侧自适应。一般一个浮动，另一个设置margin，或者一个绝对定位，另一个设置margin，代码如下（浮动方法) style> .left{ float: left; width: 200px; background: green; height: 200px; } .right{
CSS网页布局
微风洋洋的博客
02-10 7392
介绍一下CSS网页布局这个核心知识，大家一定要重视！
css聊天布局,CSS实现聊天布局
weixin_29927289的博客
08-03 1633
 hmy66吃饭了么吗吃饭了吗hmy666 {{item.contentWord}}Sendexport default {name:'chat',data() {return {chatContent: [{fromUser:'me',from_nickname:'小仙女',avatar:'https://gimg2.b...
CSS网站布局实录
07-10
内容很实际,如果你做过网页的话,会发现很多你想了很久但做不出来的东西,或者你做出来了,但他告诉你更简单的方法最主要的是你不仅会知道做,还知道原理。
css网站布局实录-2
12-15
2. **盒模型**：盒模型是CSS布局的核心，书中详细讲解了W3C标准盒模型和IE盒模型的区别，以及如何通过`box-sizing`属性来统一不同浏览器下的盒模型行为。理解盒模型对于精确控制元素尺寸和间距至关重要。 3. **布局...
CSS网页布局全精通
12-10
在本文中将使用四种常见的做法,结合CSS于结构化标记语法制作两栏布局.很快地就会发现,不用嵌套表格,间隔用的GIF也能做出分栏版面布局. 相关文章：CSS网页布局开发小技巧24则 稍后在"技巧延伸"中,将会讨论Windows版...
CSS自适应布局思路
12-09
最近在做一个自适应布局的项目，所以学了下自适应，下面是总结。此总结只做效果，不关注效率和代码优化。...css中的整体布局 CSS Code复制内容到剪贴板 @media screen and (min-width: 0px) {公共css
CSS的flex布局.ppt
06-12
网页布局（layout）是CSS的一个重点应用。布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C提出了一...
CSS【详解】层叠 z-index （含 z-index 的层叠规则，不同样式的层叠效果）
朝阳39的博客
07-09 595
仅对已定位的元素（）有效，默认值为0，可以为负值。
html设计（两种常见的充电效果）
最新发布
2301_81704123的博客
07-12 1026
title>充电效果
2024年公共文化与社会服务国际会议（ICPCSS 2024）
wx19980549140的博客
07-12 632
2024年公共文化与社会服务国际会议是一个集学术性、实践性和国际性于一体的盛会。我们期待与您共同探讨公共文化与社会服务的未来发展方向，为推动该领域的持续创新与发展贡献智慧和力量。随着社会的不断发展，公共文化与社会服务的重要性日益凸显。为了促进该领域的学术交流与合作，2024年公共文化与社会服务国际会议应运而生。本次会议旨在汇聚全球专家学者，共同探讨公共文化与社会服务的最新研究成果、发展趋势及面临的挑战，以推动该领域的持续创新与发展。
CSS技巧专栏：一日一例 3.纯CSS实现炫酷多彩按钮特效
uu0216的博客
07-10 1079
CSS的 box-shadow 属性可以用来给一个元素添加一个或多个阴影效果。如果你想要给一个div元素添加多种颜色的投影，你可以通过在box-shadow属性中用逗号分隔多个值对来实现。 上面代码，我们分别给按钮增加了红，黄，蓝，绿四种颜色的投影，并且让投影扩散范围增大，我们看看效果是不是我们想要的。在浏览器中刷新我们的按钮页面，把鼠标移动到按钮上，我们得到了这样的按钮效果：
CSS Grid 布局
08-30
CSS Grid 布局是一种强大的网页布局方式，它提供了一种二维网格系统，使得可以更灵活地定位和排列网页元素。使用CSS Grid，可以将网页分割成行和列，并通过指定网格单元格来放置元素。 要开始使用CSS Grid布局，...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值