CSS温习回顾—CSS Layout

最新推荐文章于 2024-08-03 16:11:42 发布

ImmortalSYM

最新推荐文章于 2024-08-03 16:11:42 发布

阅读量86

点赞数

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

本文链接：https://blog.csdn.net/ImmortalSYM/article/details/117047329

版权

CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

CSS温习回顾

CSS布局样式

文档流（Normal Flow）
—网页是多层结构，用户只能看到最上层结构；

—通过CSS为每一层设置样式；

—文档流为最底层结构，即网页的基础；

—我们所创建的元素默认在文档流中进行排列；

—对于元素有两种状态：
- 在文档流中；
- 脱离文档流；
元素在文档流中的特点：

—块元素

—块元素在文档流中独占一行；

—块元素自上向下垂直排列；

—默认宽度是父元素的宽度（把父元素撑满）；

—默认高度是子元素（内容）高度；

—行内元素

—行内元素在文档流中自左向右水平排列；

—行内元素不会独占一行；

—如果一行中不能容纳行内元素，会自动换到第二行，自左向右继续排列；

—行内元素的高度和宽度总是被内容撑开；
盒子模型

盒子模型（框模型）

—CSS将页面中的所有元素都设置为矩形盒子模型；

—将元素设置为矩形盒子，对页面的布局变成了将不同盒子摆放不同的位置；

—盒子的组成部分：

—内容区（content）

—内边距（padding）内容区和边框之间的间距；

—边框（border）

—外边距（margin）

内容区content

—元素中所有子元素和文本内容都在内容区排列；

—内容区的大小由width(宽度)和height(高度)两个属性设置；
边框border

—边框属于盒子边缘，边框里面为盒子内部，外面为盒子外部；
—边框的大小会影响到整个盒子的大小；

—设置边框，至少需要设置三个样式(缺一不可)：

—边框宽度border-width（默认值3px）

—border-width可以用来指定四个方向的边框宽度；

四个值的顺序分别为：上右下左（由上开始顺时针旋转）

三个值的顺序分别为：上左右下

两个值的顺序分别为：上下左右

值与值之间用空格隔开；

—除了border-width 还有border-top/right/left/bottom-width用来单独指定某个边的值；

—边框颜色border-color;

—border-color 用来指定边框的颜色，同样可以分别指定各边的颜色，规则和border-width一样的；

—border-color默认值为（前景色）color值；

—边框样式border-style;

—border-style 用来指定边框的样式；

可选值：

solid 表示实线；

dotted表示点状虚线；

dashed 表示虚线；

double 表示双线；

—border-style 默认值为none，表示无边框；

—border简写属性：

—简写：border

—可以同时设置边框所有相关的样式，无顺序要求，空格隔开；

—除了border 同样具有border-top/right/left/bottom；

—例如：
```
<style>
 div{
    border:solid red 1px;
 }
</style>
```
内边距padding

—内容区和边框之间的距离；

—一共有四个方向的内边距：

padding-top（上）

padding-right（右）

padding-bottom（下）

padding-left（左）

—简写：padding

可以同时设置四个方向的内边距，规则和border-width一样；

例如：
```
<style>
 div{
     padding:10px 20px 30px 40px;
 }
</style>
```
—内边距的设置会影响盒子的大小；

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

—一个盒子的可见框大小，由内容区、内边距和边框共同决定；计算盒子大小，需要将三个部分累加；
外边距margin

—外边距不会影响盒子可见框的大小，但是影响盒子位置；

—涉及和其他盒子的位置关系；

—一共有四个方向的外边距：

margin-top：上外边距，设置正值，元素下移；

margin-right：右外边距，默认情况下，设置margin-right不会产生任何效果；

margin-bottom：下外边距，设置正值，其下边元素会向下移动；

margin-left：左外边距，设置正值，元素右移；

—margin可以设置负值，如果设置负值，元素会向相反方向移动；

—元素在页面中按照自左向右顺序排列的；

—默认情况下，设置左和上外边距，会移动元素自身；而设置下和右外边距会移动其他元素；

—简写：margin其用法规则和padding相同；

—margin会影响到盒子实际占用空间；
水平布局
—元素在其父元素中水平方向的布局，主要由以下7个属性共同决定：

margin-left、border-left、padding-left、width、padding-right、border-right、margin-right；

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

上述七个属性值相加=父元素的内容区

—如果相加结果，等式不成立，称为过度约束，等式会自动调整；

—如果七个值当中没有auto，浏览器自动调整margin-right值以使得等式成立；

—七个值当中，margin-left、width、margin-right可以设置为auto；

—如果三个值当中某个值为auto，则自动调整auto值以使得等式成立；

—如果一个宽度和一个外边距设置为auto，则会自动调整宽度最大，设置为auto的外边距调整为0，以使得等式成立；

—如果三个值都为auto，则外边距都为0，宽度自动调整为最大值，以使得等式成立；

—如果将两个外边距设置为auto，宽度设置为固定值，则会将两个外边距自动调整为相同的值，以使得等式成立；经常利用这个特点，使得子元素在父元素水平居中；

—例如：
```
<style>
div{
  width:100px;
     margin:0px auto;
 }
</style>
```
垂直布局

默认情况下，父元素的高度被子元素撑开的；
—子元素在父元素的内容区，如果子元素的大小超过了父元素，则子元素会从父元素溢出；

—可以使用CSS样式中，overflow属性设置父元素的如何处理溢出的子元素；

—可选值

visible ：默认值，子元素会在父元素溢出，并且在父元素外部显示；

hidden ：隐藏，子元素溢出的内容将会被裁剪；（溢出内容将会被剪切掉）

scroll ：滚动，生成垂直和水平滚动条，通过滚动条查看完整的内容；

auto：根据需要生成滚动条；

—除了overflow属性，还有overflow-x和overflow-y属性；

—overflow-x 处理水平方向；

—overflow-y处理垂直方向；
外边距的重叠

—相邻的垂直方向外边距会发生重叠现象；（margin-top和margin-bottom）；

—兄弟元素

—兄弟元素的相邻垂直外边距会取两者之中最大值；（两者都是正值）

—特殊情况，如果相邻垂直外边距如果一正一负，则取两者之和；

—如果相邻垂直外边距都为负值，取两者绝对值最大值；

—兄弟元素垂直外边距的重叠对于开发有利，所以一般不需要处理；

—父子元素

—父子元素的相邻垂直外边距，子元素的（上外边距）会传递给父元素；

—父子外边距的折叠会影响页面布局；

—调整父子元素相邻垂直外边距的折叠：

—不使用外边距，父元素使用内边距padding；（一定要注意修改盒子的内容区height高度使其可见框大小保持原来的大小）

—增加父元素边框border以使得父子元素的外边距隔开；（一定注意修改内容区height高度，使其可见框大小保持原来的大小），并且需要修改子元素的margin-top，修改为原margin-top 减去border的大小（因为此时的父元素内容区高度减少了border高度）；
行内元素的盒模型

—行内元素不支持设置width和height；

—行内元素可以设置padding，但是垂直方向的padding不会影响页面布局；(会盖住下面的元素，但是不会将下面元素挤下去)

—行内元素可以设置border,同样垂直方向的border不会影响页面布局；

—行内元素可以设置margin，但是垂直方向的margin不会影响页面布局；水平方向的margin不会发生重叠，直接相加；

相关属性：

—display属性，用来设置元素显示的类型；

可选值

—inline 将元素设置为行内元素；

—block 将元素设置为块元素；

—inline-block将元素设置为行内块元素；（既可以设置宽度和高度，又不会独占一行；）开发过程中尽量少用；

—table 将元素设置为表格；

—none元素不在页面显示；

—visibility用来设置元素的显示状态；

可选值

—visible：默认值，元素在页面中正常显示；

—hidden：隐藏，元素在页面中隐藏不显示，但是与display:none不同的是，元素不显示但是占据页面的位置；
浏览器默认样式
—通常情况下，浏览器会为元素设置为一些默认样式；

—默认样式的存在会影响到页面的布局，通常情况下，编写网页时，需要去掉浏览器的默认样式（PC端的页面）；

—可以通过开发者模式(F12)，查看浏览器默认边距；

—通常情况下，使用通配选择器，将浏览器中默认的外边距和内边距设为0；
```
去除浏览器默认的外边距和内边距
<style>
 *{
     margin:0;
     padding:0;
 }
去除列表的项目符号
 ul{
     list-style:none;
 }
</style>
```
—通配选择器不一定能去除全部标签的默认样式，我们可以应用其他人开发的重置CSS样式表；一般在<style>标签上，通过link引入重置样式表；

—重置样式表是专门用来对浏览器的默认样式进行重置；他人设计的样式表可能会有两种形式：

—reset.css直接去除了浏览器的默认样式；

—normalize.css对浏览器的默认样式进行了统一；
盒子大小

—box-sizing 用来设置width和height的作用(主要是设置可见框的大小)

可选值

—content-box：默认值，宽度和高度用来设置内容区的大小；

—border-box：宽度和高度用来设置整个盒子可见框的大小；

即width 和 height 指的是内容区、内边距和边框的总大小；会减少盒子内容区的大小；
边框样式

—box-shadow 用来设置元素的阴影效果，阴影不会影响页面布局；

—默认情况下，阴影处于元素正下方，并且和元素一样大小；

—语法：box-shadow:10px 10px 10px rgba(0,0,0,.3);

—第一个值：水平偏移量，设置阴影的水平位置，正值向右移动，负值向左移动；

—第二个值：垂直偏移量，设置阴影的垂直位置，正值向下移动，负值向上移动；

—第三个值：阴影的模糊半径；

—第四个值：阴影的颜色，通常使用rgba(0,0,0,.3)；
—border-radius 用来设置圆角；

—除此还有四个属性：

—border-top-left-radius：左上角

—border-top-right-radius：右上角

—border-bottom-left-radius：左下角

—border-bottom-right-radius：右下角

—圆角设置的是圆的半径大小；

—另外，可以设置为两个值，水平方向的半径和垂直方向的半径（椭圆）；

—可以分别指定水平和垂直的圆角，通过/隔开：

border-radius:20px / 40px;

—可以使用border-radius设置四个方向的圆角

—四个值分别表示：左上右上右下左下；

—三个值分别表示：左上右上/左下右下

—两个值分别表示：左上/右下右上/左下；
```
元素设置为圆形
<style>
div{
  border-radius:50%;
}
</style>
```
—outline用来设置元素的轮廓线，用法与border相同，但是不会影响页面布局；不会影响可见框的大小；

简单的页面布局

网页页面布局时，如果想要设置垂直排列，则就设置多个块元素；

如果想要水平排列，就设置多个块元素，并将其全部进行浮动（左右都可）；

<body>
    创建网页的头部
    <header></header>
    创建网页的主体（一个网页只有一个主体）
    <main>
        创建主体左侧导航
        <nav></nav>
        创建主体中间文章
        <article></article>
        创建右侧边栏
        <aside></aside>
    </main>
    创建网页的底部
    <footer></footer>
</body>

ImmortalSYM

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS温习回顾—CSS Layout

CSS温习回顾CSS布局样式文档流（Normal Flow）—网页是多层结构，用户只能看到最上层结构；—通过CSS为每一层设置样式；—文档流为最底层结构，即网页的基础；—我们所创建的元素默认在文档流中进行排列；—对于元素有两种状态：在文档流中；脱离文档流；元素在文档流中的特点：—块元素 —块元素在文档流中独占一行； —块元素自上向下垂直排列； —默认宽度是父元素的宽度（把父元素撑满）； —默认高度是子元素（内容）高度；—行内元素 —行内元素在文
复制链接

扫一扫

专栏目录