什么是CSS盒模型及利用CSS对HTML元素进行定位的实现？含h5/css3新增属性

2024-04-27 07:24•css•阅读 4270

大家好，很高兴又跟大家见面了！本周更新博主将给大家带来更精彩的HTML5技术分享，通过本周的学习，可实现大部分的网页制作。以下为本次更新内容。

第四章 css盒模型

<!DOCTYPE html>

<html>

<head>

.div1{

width: 100px;

height: 100px;

background-color: red;

/* [margin 外边距]

* margin属性值最多有四个：

* ① 写一个值：四个方向的margin均为这个值

* ② 写两个值：上、右两个方向，下默认=上，左默认=右

* ③ 写三个值：上、右、下三个方向，左默认=右

* ④ 写四个值：上、右、下、左四个方向

* ⑤ 写三个值+auto：控件居右显示

* margin: 50px 30px 20px auto; 距离父容器右侧30px

* ⑥ margin: 0 auto; 设置控件在父容器中，水平居中

/*注意！！！当子盒子的上边界与父盒子的上边界重合时，调整margin-top会影响到父盒子的外边距，

使用overflow: hidden消除影响。*/

margin: 0 auto;

/* [border 边框]

* border 有三个属性值：宽度width 样式style 颜色color

* 原则上，三个属性都需要手动指定(color不写时，默认为黑色)

border: 10px solid green;

/* [padding 内边距]

* 使用方式，同margin①~④

* 注意：使用padding会将整个控件撑大，使用时需注意控件可视区域的实际大小。

padding: 50px;

/* [border-radius 圆角]

* 1、可以接受8个属性值： X轴(左上、右上、右下、左下)/Y轴

* 例如：border-radius: 50px 50px 50px 50px / 50px 50px 50px 50px;

* 2、只写X轴时，Y轴默认等于X轴。只写左上角，默认=右下角。只写右上角，默认=左下角

* 例如：border-radius: 50px 0px ;

* =border-radius: 50px 0px 50px 0px;

* =border-radius: 50px 0px 50px 0px/50px 0px 50px 0px;

* 3、只写一个数，默认8个值均相等。

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

/* [box-shadow 盒子阴影]

* 1、六个属性值，空格分割：

* x轴阴影距离：(必选) 可正可负，正——右移负——左移

* y轴阴影距离：(必选) 可正可负，正——下移负——上移

* 阴影模糊半径：(可选) 只能为正，默认为0。数值越大，阴影越模糊

* 阴影扩展半径：(可选) 可正可负，默认为0。数值增大，阴影扩大。数值减小，阴影缩小

* 阴影颜色：(可选) 默认为黑色

* 内外阴影：(可选) 可选值：inset(内阴影) 默认为外阴影

/* [border-image 图片边框]

* 1、十个属性：

* ① 图片路径：url()

* ② 图片切片宽度：4个值，分别代表上、右、下、左，四条切线。通过四条切线切割后，会把图片分成九宫格，四个角分别对应边框的四角(不会进行任何拉伸)，四个边分别对应边框的四边(根据设置进行拉伸/平铺/铺满)。

* 写的时候，不能带px单位

* ③ 图片边框的宽度：4个值，分别代表上、右、下、左四条边框

* 写的时候，必须带px单位

* ④ 边框背景重复方式：stretch(拉伸)、round(铺满)、repeat(平铺)

* 【铺满和平铺区别】

* 平铺：会保持原有四条边的宽度，进行平铺。可能导致角落处无法显示完整一个图标；

* 铺满：会对四条边进行适当的拉伸压缩，确保可以正好显示完全。

* 2、属性值写法：border-image: ① ②/③px ④;

* 第②部分可以只写1个、2个、3个，判断方式同margin

box-shadow: 0px 0px 10px 0px blue inset;

}

input:focus{

box-shadow: 0px 0px 1px 0px cornflowerblue inset;

}

</style>

</head>

<body>

<div >

这是div中的文字

</div>

</body>

</html>

第五章 css定位机制

一、css相对定位

<!DOCTYPE html>

<html>

<head>

.div1{

width: 100px;

height: 100px;

background-color: red;

/* [相对定位 relative]

* 1、使用position: relative; 设置元素为相对定位的元素；

* 2、定位机制：

* ① 相对于自己原来文档流中的位置定位，当不指定top等定位值时，不会改变元素位置；

* ② 相对定位元素，仍会占据原有文档流中的位置，而不会释放。

* 3、使用top、left、bottom、right调整位置。当left和right同时存在，left生效，当top和bottom同时存在，top生效。

position: relative;

/*top: 50px;*/

/*left: 50px;*/

left: 50px;

top: 50px;

z-index: 0;

}

.div2{

width: 100px;

height: 100px;

background-color: green;

/*position: relative;

bottom: 50px;*/

/*z-index: -10;*/

}

.img{position: absolute;

clip:rect(0px 126px 126px 0px) ;

}

.img:hover{

clip:rect(0px 252px 252px 126px) ;

margin-left: -126px; }

</style>

</head>

<body>

这是第一个div

</div>

这是第一个div

</div>

</body>

</html>

二、css绝对定位、固定定位

<!DOCTYPE html>

<html>

<head>

/* [绝对定位 absolute]

* 1、使用position: absolute;设置元素为绝对定位元素。

* 2、定位机制：

* ① 相对于第一个非static的祖先元素(即使用了relative/absolute/fixed定位的祖先元素)进行定位。

* ② 如果所有祖先元素均未定位，则相对于浏览器左上角定位；

* ③ 使用absolute的元素，会从文档流中完全删除，原有空间释放不再占有；

* [固定定位 fixed]

* 1、position: fixed; 是一种特殊的绝对定位，父容器无法使用relative锁住

* 2、定位机制：永远相对于浏览器进行定位。

* [z-index 属性]

* 1、作用：设置定位元素的Z轴层叠顺序

* 2、使用要求：① 必须是定位元素才能使用。relative/absolute/fixed

* ② 使用z-index需要考虑父容器的约束。

* 如果父容器为z-index:auto，则子容器的z-index可以不受父容器的约束；

* 如果父容器z-index进行了设置，则子容器的层叠将以父容器的z-index为准(在同一父容器的不同子元素，仍可以通过自己的z-index调整层叠关系)。

* 3、z-index:auto & z-index:0 的异同：

* ① z-index:auto为默认值，与z-index:0处于同一平面。

* ② z-index:auto,不会约束子元素的z-index层次，而z-index:0，会约束子元素必须与父元素处于同一平面。

* 4、z-index相同(处于同一平面的定位元素)的层叠关系：后来者居上

.div1{

width: 100px;

height: 100px;

background-color: red;

/*margin: 0 auto;*/

position: relative;

top: 25px;

left: 25px;

/* 绝对定位元素水平居中的方式：

1、left: 50%;

2、设置margin-left为-width/2：如margin-left: -50px;

z-index: auto;

}

.div1_1{

width: 50px;

height: 50px;

background-color: blue;

position: relative;

top: 0px;

left: 0px;

z-index: 1;

}

.div2{

width: 100px;

height: 100px;

background-color: yellow;

position: relative;

/*z-index: -1;*/

}

.div2_1{

width: 50px;

height: 50px;

background-color: green;

position: relative;

/*z-index: 100;*/

}

</style>

</head>

<body>

</div>

</div>

</body>

</html>

三、负边距的使用

<!DOCTYPE html>

<html>

<head>

/* 【1、实现块级元素在块级元素中水平垂直居中】

* ① 设置子容器为定位元素；

* ② left:50%; margin-left:-width/2;

* top:50%; margin-top:-height/2;

.div1{

width: 100px;

height: 100px;

background-color: red;

overflow: hidden;

/*position: relative;*/

}

.div2{

width: 50px;

height: 50px;

background-color: blue;

position: relative;

left: 50%;

margin-left: -25px;

top: 50%;

margin-top: -25px;

}

/* 【2、使用负边距增大元素宽度】

* ① 不指定子容器宽度，指定高度或填充内容；

* ② margin: 0px -50px; 可以是左右两边，均超出父容器50px

.div3{

width: 200px;

height: 50px;

border: 5px dotted #0000FF;

margin: 0 auto;

}

.div4{

background-color: red;

height: 100%;

margin: 0px -50px 0px -50px;

text-align: center;

}

/* 第二部分应用，解决div中多个li间距问题

.div5{

width: 170px;

height: 110px;

background-color: #CCCCCC;

}

.div5 ul{

list-style: none;

/*width: 180px;*/

margin-right: -10px;

padding: 0px;

}

.div5 ul li{

width: 50px;

height: 50px;

margin-right: 10px;

margin-bottom: 10px;

background-color: orange;

float: left;

}

/* 3、负边距实现双飞翼布局

* ① 由于main部分写在前面，所以可以保证朱布局的优先加载

.main, .sub, .extra {

float: left;

}

.main {

width: 100%;

background-color: #ccc;

}

.sub {

width: 190px;

background-color: #333;

margin-left: -100%;

}

.extra {

width: 230px;

background-color: #000;

margin-left: -230px;

}

.main-wrap {

margin: 0 230px 0 190px;

}

</style>

</head>

<body>

</div>

12345

</div>

<ul>

</ul>

</div>

</div>

</div>

<p>Extra</p>

</div>

</body>

</html>

第六章 html5新增属性

一、h5新增标签

<!DOCTYPE html>

<html>

<head>

</head>

<body >

<!-- 【HTML5 新增结构标签】

section：表示页面中的一个内容区块，文档的主体部分，用于将网页或文章划分章节、区块。

article：表示页面中的一块与上下文不相关的独立内容，例如博客中的一篇文章。

aside：表示article元素内容之外的，与article元素内容相关的辅助信息。(常用于相关推荐啊等)

header：网页或文章的头部。

footer：网页或文章的底部。

nav：表示页面中导航链接的部分

hgroup：用于整个页面或页面中一个内容区块的标题进行组合。

-->

<!--【HTML5表单属性】

Form:指向特定表单id，实现input无需放于form中，即可通过form提交；

Formaction/Formmethod:设置某个submit按钮，提交到指定的action地址，使用指定的method方法。

会覆盖form中的action和method属性

Placeholder:自动提示

Autofocus:自动获得焦点

Autocomplete:自动完成功能

详见 05_表单form.html 第8部分

List：指向指定的datalist的ID，为input绑定一组指定的datalist提示信息(datalist具有和Autocomplete类似的自动筛选完成功能)

>>>写法：<input type="text" list="data1"/>

您的浏览器不支持 video 标签。

</video>

<div>

</div>

</body>

</html>

二、css3新增属性

<!DOCTYPE html>

<html>

<head>

html{

font-size: 10px;

}

.div1{

width: 200px;

height: 200px;

border: 1px solid red;

font-size: 0.75rem;

}

.div2{

width: 100px;

height: 100px;

background-color: green;

font-size: 2rem;

}

.div3{

width: 200px;

height: 200px;

border: 20px green dotted;

background-image: url(css/yanhua1.png);

background-size: 100px 100px;

background-repeat: no-repeat;

* background-origin：设置背景图的定位方式。border-box从边框外缘开始，padding-box从边框内缘，

* content-box从文字内容区开始

* background-origin不改变背景图显示区域大小，只决定左上角定位位置。

* background-clip：裁切背景图和背景色显示区域。border-box从边框外缘开始显示，padding-box从边框内缘开始显示，

* content-box从文字内容区开始显示。不在显示区域内的背景图或背景色，会被裁切不显示

* background-clip不改变定位位置，只是通过裁切显示部分区域。

/*background-origin: content-box;*/

background-clip: content-box;

background-color: blue;

padding: 30px;

}

.div4{

width: 100px;

height: 100px;

overflow: hidden;

/*background-color: gray;*/

}

.div4 img{

width: 100px;

height: 100px;

/* transition属性：定义过渡

* ① 参与过渡的属性，可以单独指定某个CSS属性，也可以all/none

* ② 过渡开始到过渡完成的时间，.3s .5s

* ③ 过渡的样式函数常选 ease

* ④ 过渡开始前的延迟时间，可以省略

* transition属性可以同时定义多个过渡效果，用逗号分隔

* 例如：transition: color .3s ease,border .5s linear;

transition: all .3s ease;

}

.div4:hover{

height: 30px;

}

.div4:hover img{

/* transform定义变换：

* 常用变换：translate 平移

* scale 缩放

* rotate 定义旋转

* transform可同时进行多种变换，多种变换之间空格分割：

* 例如：transform: scale(1.8,3.0) translateY(0px) rotate();

* transform-origin：定义变形起点。

* 可选值：left/center/right top/center/bottom

* 或者，直接写X Y轴坐标点。

* 例如：transform: rotate(180deg);

* transform-origin: right bottom;

* 表示，绕左下角，旋转180度。

/*transform: scale(3);

transform-origin: left bottom;*/

transform: scale(1.8,3.0) translateY(0px);

}

.div5{

width: 100px;

height: 100px;

background-color: red;

-webkit-animation: myFrame 5s ease .5s infinite alternate forwards;

/*-webkit-animation-fill-mode: ;*/

}

/*[CSS3 动画的使用]

1、声明一个动画(关键帧)

@keyframes name{

from{}

to{}

}

阶段写法：

① 每个阶段用百分比表示，从0%到100%

② 起止必须设置即0%和100%或者from和to

2、在CSS选择器中，使用Animation动画属性，调用声明好的关键帧

【Animation:缩写顺序】

Animation-name 动画名称(@keyframes 名称)

Animation-duration 动画持续时间

Animtaion-timing-function动画速度曲线常选ease

Animtaion-delay 动画延迟时间

Animation-iteration-count 播放次数，默认为1，无限次Infinite

Animation-direction 设置对象动画在循环中是否反向运动（ Alternate 逆向播放）

* animation-fill-mode 设置对象动画时间之外的状态（forwards：停留在动画结束状态 backwards:停留在动画开始状态）

>>> 注意animation-name和animation-duration必须设置

>>> animation可以同时设置多个动画动画之间用,分隔

animation:frame1 .3s,frame2 .5s……

@-webkit-keyframes myFrame{

0%{

background-color: red;

}

25%{

background-color: yellow;

}

50%{

background-color: blue;

}

100%{

background-color: green;

}

</style>

</head>

<body>

</div>

<div >

</div>

口可口可口可口可口可口可口可口可

</div>

这是div1

这是div1里面的div2

</div>

</body>

</html>

本期分享就到这里，敬请下周继续关注！

什么是CSS盒模型及利用CSS对HTML元素进行定位的实现？含h5/css3新增属性

相关推荐

如何深入学习CSS？

css清除浮动的3种方式

html 和 body标签的 css 设置

css中元素的auto属性值是什么意思，比如margin:0 auto表示什么？

HTML、CSS知识点总结_D

网页CSS中*{margin:0; padding:0;}有什么用？

DIV+CSS基础教程

CSS之position