2.HTML传统布局方式

最新推荐文章于 2024-03-08 04:24:09 发布

咸鱼柴也有大厂梦

最新推荐文章于 2024-03-08 04:24:09 发布

阅读量299

点赞数

分类专栏： C认证文章标签： html5 css3

本文链接：https://blog.csdn.net/bbxx_lzx/article/details/124246672

版权

C认证专栏收录该内容

2 篇文章 0 订阅

订阅专栏

前言：

通过自身学习C4的过程总结归纳、总结出知识点，方便自己巩固以及为备考、预考的同学提供便利文档

注：内容出处:【CSDN-C训练】

一、CSS样式引入的方式

1、内联样式（不推荐使用）

<h1 style="color: red">内容</h1>

2、在style标签内定义（根据实际开发需求决定）

<style>
    h1 {
        color: pink;
    }
</style>

3、使用@import导入外部CSS样式表（根据实际开发需求决定）

<header>
    <style>
        @import url("style.css");
    </style>
</header>

4、使用<link>标签导入外部样式（推荐）

<header>
    <link rel="stylesheet" href="style.css" />
</header>

二、CSS常见选择器

1、通配符选择器：选中所有元素，常用于初始化样式

*{
    /*  */
}

2、标签选择器：用于选中所有该标签名的元素，统一设定格式

div{
    /*  */
}

3、类名选择器：选中对应class的元素，修改样式

<div class="box">内容</div>
.box{
    /*  */
}

4、id选择器：选中对应id的元素，修改样式

<div id="box">内容</div>
#box{
    /*  */
}

5、属性选择器：选中了指定元素中包含指定属性的标签，修改样式

<img src="zero.jpg" alt="banner">
img[alt*="banner"]{
    /*  */
}

其中：[attr] 表示带有以 attr 命名的属性的元素

[attr=value] 表示带有以 attr 命名的属性，且属性值为 value 的元素

[attr~=value] 表示带有以 attr 命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中至少有一个值为 value

[attr|=value]表示带有以 attr 命名的属性的元素，属性值为“value”或是以“value-”为前缀（"-"为连字符，Unicode 编码为 U+002D）开头。典型的应用场景是用来匹配语言简写代码（如 zh-CN，zh-TW 可以用 zh 作为 value）

[attr^=value] 表示带有以 attr 命名的属性，且属性值是以 value 开头的元素

[attr$=value] 表示带有以 attr 命名的属性，且属性值是以 value 结尾的元素

[attr*=value] 表示带有以 attr 命名的属性，且属性值至少包含一个 value 值的元素

[attr operator value i] 在属性选择器的右方括号前添加一个用空格隔开的字母 i（或 I），可以在匹配属性值时忽略大小写（支持 ASCII 字符范围之内的字母）

[attr operator value s] Experimental 在属性选择器的右方括号前添加一个用空格隔开的字母 s（或 S），可以在匹配属性值时区分大小写（支持 ASCII 字符范围之内的字母）。

6、直接子代选择器：选出A元素中的第一代子代

<main>
    <div>
        <p>内容一</p>
    <div>
    <p>内容二</p>
</main>

main > p{
    /*  */
}
//选择的结果是 内容一

7、后代选择器：选出A元素中的所有B后代

<main>
    <div>
        <p>内容一</p>
    <div>
    <p>内容二</p>
</main>

main  p{
    /*  */
}
//选择的结果是 内容一 和 内容二

8、伪类选择器：常用于交互效果、样式效果实现

a:hover{
    color:pink;
}
p::before {
  content: "♥";
}

重点

优先级排序：!important > 行内样式 > id > class > tag，优先级较低的样式会被优先级较高的样式所覆盖，同等优先级情况下，后面的元素会覆盖前面的元素

三、盒子模型

1、盒子模型

一个“盒子”由四个部分组成，由内到外分别是margin（外边距）、boder（边框）、padding（内边距）、盒子内容。分别用来控制，盒子与盒子之间的距离、盒子的边框大小，样式、盒子边框与盒子内容的距离，

2、内外边距，边框的设置方式

内外边距，margin处可以用padding代替
1.分别设置上右下左
.box {
margin-top:10px; 
margin-right:10px; 
margin-bottom:10px; 
margin-left:10px;
}
2.一次性赋值,分别
.box {
margin: 10px 15px 20px 25px;
}

边框 solid实线 none无边框 dotted点线 dashed虚线
.box01 {
专门设置边框样式
border-style: solid solid solid double;
or
简写
border-: 1px solid #ccc;
}

3、盒子模型的box-sizing

浏览器默认的盒子模型元素width是不包括左右内边距和左右边框的，实际开发中，通常会将box-sizing的值设置为border-box，让width包含内容宽度、内边距和边框，更方便为元素调整样式，这一设定通常写入到初始化样式里

*{
    默认值为content-box,只包含内容 
    box-sizing: border-box;
}

水平方向 : 左外边距+左边框+左内边距+ content-width +右内边距+右边框+右外边距

垂直方向 : 上外边距+上边框+上内边距+ content-height +下内边距+下边框+下外边距

4、HTML文档流

（1）块级元素和行内元素

块级元素独占一行，从上至下排列，行内元素从左到右排列，超过父元素边界则自动换行

（2）常见的块级、行内元素

块级：div、h1-h6、header、main、footer、nav、ul、ol、form、article、section、aside、table、video

行内：span、img、a、input、select、button、textarea

重点：行内元素设置width, height无效，宽度随元素的内容而变化。

水平方向的padding-left和padding-right都会产生边距效果，但是竖直方向上的padding-top和padding-bottom都不会产生边距效果。

行内元素只能包含数据或者其他行内元素

四、浮动布局（float）

1、浮动布局的概念及作用

通过元素浮动，可以使元素在水平上左右移动，通过margin属性调整位置，可以实现更简便、美观的布局

2、浮动实现

div {
float: left;  //左浮动
float: right; //右浮动
}

3、浮动特性

（1）浮动后，浮动内容仍然遵循盒子模型

（2）多个元素浮动后会在同一行显示，当超出父元素边界以后会另起一行

（3）浮动后的元素具有行内块(inline-block)的特性：不自动换行、可以设置宽高，排列从右到左

（4）浮动后元素会上浮，标准流元素会自动往前顶到当前元素原来的位置

4、清除浮动

浮动后，元素脱离文档流控制，最常见的是元素浮动后，导致布局塌陷，是因为浮动的元素没有撑开父元素的高度，所以为了布局工作的顺利进行，要清除浮动

<div class="big-box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</div>
<div class="clearfix"></div>

方法一：在浮动元素后添加一个div，给div设置属性（不推荐）
.clearfix {
    clear: both;
}

方法二：给浮动元素的父元素添加伪类（推荐）
.big-box::after {
    display: block;
    content: " ";
    clear: both;
}

五、定位布局（position）

1、相对定位（relative）

被设定position： relative; 属性的元素，会相对与自己原来的位置进行移动，不会脱标

.box {
  position: relative;
  离开左侧100px
  left: 100px;
  离开顶部50px
  top: 50px;
}

2、绝对定位（absolute 子绝父相）

被设定position: absolute; 属性的元素的位置，是根据父元素决定的，如果没有父元素或者父元素没有设置相对定位，则会以浏览器的位置来进行定位，会脱标

.big-box {
  /* 设置相对定位 */
  position: relative;
}
.box1 {
  /* 设置绝对定位 */
  position: absolute;
  left: 70px;
  top: 120px;
}

3、固定定位

被设定：position：fixed；属性的元素，会被固定在浏览器某个固定区域，浏览器滚动时元素位置不会改变，会脱标，但是不会占用原来位置，固定定位可以当做是特殊的绝对定位，常用于二维码，侧边栏，联系客服等

box {
  position: fixed;
  top: 30px;
  right: 30px;
}

生命不息，学习不止，键盘敲烂，月薪过万！加油，代码人！