Web前端复习-5、CSS页面布局

最新推荐文章于 2021-06-30 12:06:36 发布
最新推荐文章于 2021-06-30 12:06:36 发布
阅读量304 收藏 2
点赞数
分类专栏： 复习 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45560350/article/details/106788439
版权

在这里插入图片描述

1.盒子模型

  • 在页面布局中，为了将页面元素合理有效地组织在一起，形成一套完整的、行之有效的原则和规范，称为盒子模型

  • 页面中的所有元素都可以看成一个盒子，并占据一定的页面空间，通过盒子之间的嵌套、叠加或并列，最终形成了页面。

  • 盒子模型是由内容（content）、边框（border）、内边距(padding) 和外边距(margin) 四部分组成

在这里插入图片描述

2.内容区content

  • 内容区（content）是盒子模型的中心，包含了盒子的主要信息内容，例如文本、图片等。
  • 内容区拥有width、height和overflow三个属性
  • overflow属性用于当content中的信息太多，并超出内容区所占的范围时，通过该属性来指定溢出内容的处理方式，具体如下表所示
    在这里插入图片描述
<style type="text/css">
     div{
         width:400px;
         height:200px;
         //当overflow属性为scroll，浏览器会添加一个滚动条
         overflow:scroll; 
     }
</style>

在这里插入图片描述

3.边框border

边框（border）是指围绕元素的内容和内边距的一条或多条线，通过border-top-style、border-right-style、border-bottom-style和border-left-style四个属性对“上右下左”

四个方向的边框样式分别进行设置，每条边框又有宽度、颜色、样式和圆角等特征：

  • 元素的边框的样式包括宽度、样式和颜色等
  • 可以通过border-width、border-style和border-color属性对边框进行统一设置
  • 可以通过border-top-width、border-top-style和border-top-color等属性对某一条边进行设置
边框border属性列表

在这里插入图片描述

3.1 边框宽度

边框宽度border-width属性的取值范围为指定的关键字或数值，其中关键字包括thin（细边框）、medium（默认值，中等边框）、thick（粗边框）

边框的参数可以是1~4个

  • 当边框宽度有4个参数时，将按“上->右->下->左”的顺序作用到边框上，即遵循TRBL原则（按照Top、Right、Bottom、Left 顺时针方向依次赋值）
div { border-width:10px 20px 30px 40px; }
  • 当边框宽度有3个参数时，将按“上->左+右->下”的顺序作用到边框上
div { border-width:10px 20px 30px; }
  • 当边框宽度有2个参数时，将按“上+下->左+右”的顺序作用到边框上
div { border-width:10px 20px; }
  • 当边框宽度有1个参数时，四个方向的边框宽度取值相同
div { border-width:10px; }
  • 边框宽度的取值也可以使用关键字进行设置
div { border-width: thick/medium/thin; }
3.2 边框样式取值

在这里插入图片描述

3.3 圆角边框

  • 通过border-top-left-radius、border-top-right-radius、border-bottom-right-radius和border-bottom-left-radius属性分别对左上角、右上角、右下角、左下角的样式进行设置

  • 也可以使用border-radius属性对四个角的样式统一进行设置

  • 圆角边框的圆角是椭圆的一条弧线，如下图所示，HR代表椭圆的水平半径，VR代表椭圆的垂直半径；HR与VR相同时，圆角就会变成四分之一圆弧
    在这里插入图片描述

  • 当border-top-left-radius具有一个参数时，水平半径与垂直半径相同
    例如：border-top-left-radius:8px HR和VR均为8像素；

  • 当border-top-left-radius属性有两个参数时，第一个参数是水平半径，第二个参数是垂直半径
    例如：border-top-left-radius:8px 20px HR为8像素，VR为20像素。

  • 元素的圆角不仅可以单独设置，还可以统一设置；

  • 根据border-radius的取值情况可分以下几种情况：

    1. 水平半径与垂直半径相等
    2. 水平半径与垂直半径不相等
3.3.1 圆角边框–水平半径与垂直半径相等

  1. 水平半径与垂直半径相等

    （1）当border-radius属性只有一个参数时

    	样式属性名：属性值；
	
	元素的top-left、top-right、bottom-right和bottom-left取值均相同

    （2）当border-radius属性有两个参数时

    	样式属性名: 属性值1 属性值2;

 top-left和bottom-right相同，取值均为属性值1；
 
 top-right和bottom-left相同，取值均为属性值2。

    （3）当border-radius属性有三个参数时

    	样式属性名: 属性值1 属性值2 属性值3;
	
	 top-left取值为属性值1
	 
	 top-right和bottom-left相同，取值均为属性值2
	 
   	 bottom-right取值为属性值3

    （4）当border-radius属性有四个参数时

    样式属性名: 属性值1 属性值2 属性值3 属性值4;

top-left、top-right、bottom-right和bottom-left分别对应4个不同的属性值

即从左上角开始按照顺时针方向依次赋值

  2. 水平半径与垂直半径不相等

  • 当水平半径与垂直半径不同时，需要用 斜线（/） 隔开
  • 水平半径（或垂直半径）的参数都也可以是1~4个

（1）当border-radius属性有一个水平半径和一个垂直半径时

		样式属性名: 水平值 / 垂直值

  • 斜线（/）的前后参数分别表示水平半径和垂直半径

  • 水平值用于指定元素的四个角的水平半径

  • 垂直值用于指定元素的四个角的垂直半径

      border-radius: 10px/20px;  /* 水平/垂直 */

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

在这里插入图片描述

3.4 边框阴影
  • 边框阴影（box-shadow）可以为元素的边框添加一个或多个阴影
  • box-shadow的属性可以由2~6个参数构成
box-shadow: h-shadow（水平阴影的位置）
  		  	v-shadow（垂直阴影的位置） 
  		  	[blur]（模糊距离）
  		  	[spread]（阴影的尺寸）
  		  	[color]（阴影的颜色）
  		  	[inset];（将外部阴影 (outset) 改为内部阴影）

/* 带h-shadow和 v-shadow两个参数*/
box-shadow: 50px 50px;
/* 带h-shadow、v-shadow、blur和color四个参数*/
box-shadow: 50px 50px 5px black;
/* 带h-shadow、v-shadow、blur、spread和color五个参数*/
box-shadow: 10px 6px 10px 5px #AAAAAA;
/* 带h-shadow、v-shadow、blur、spread、color和inset六个参数*/
box-shadow: 10px 10px 50px 20px pink inset;

.imageDiv{
   width:294px;
   /* 设置内边距，具体后面进行讲解 */
   padding:10px 10px 20px 10px;
   border:1px solid #BFBFBF;
   background-color:white;
   /* 添加边框阴影box-shadow */
   box-shadow: 10px 6px 10px 5px #AAAAAA;
}

在这里插入图片描述

3.5 图像边框相关属性
  • 在CSS 3之前设计图像边框时，需要为元素的每条边提供一幅图像，每个角提供一幅图像，边框和角使用相应的图像作为背景；当元素变宽（或变长）时，边框使用对应的图片进行平铺或拉伸，而角不需要变化，这种设计方式相对比较复杂。
  • 针对这种情况，在CSS 3中新增了border-image属性，当元素的长度或宽度改变时，同样可以使用一个图像对边框进行绘制。
    在这里插入图片描述
3.5.1 边框背景的分割

border-image-slice属性在逻辑上对背景图像进行分割

border-image-slice: [ <number> | <percentage> ] {1,4} && fill?

在这里插入图片描述
其中：

  • 参数可以有1~4个，允许是数值或百分比
  • 参数遵循TRBL原则，按照顺时针方向使用指定宽度对图像进行分割，将图像分割成9部分
  • 默认情况下，元素中心区域不填充边框的图像；当提供参数fill时，元素的中心区域将被填充
border-image-slice: 10 20 30 40;
border-image-slice: 10 20 30 40 fill;
3.5.2 边框背景的使用

border-image属性用于对元素的边框进行统一设置，取值情况相对较复杂

border-image : url(图像的路径) 
               图像分割方式/图像边框宽度
               图像平铺方式

其中：

  • 图像分割方式（slice）参数个数可以是1~4个，遵循TRBL规则
  • 边框宽度（width）参数个数可以是1~4个，遵循TRBL规则
  • 图像平铺方式有平铺覆盖（repeat）、取整平铺（round）或拉伸覆盖（stretch）三种方式
//图像边框的使用
border-image:url("images/borderImage2.jpg") 40;
border-image:url("images/borderImage2.jpg") 40/40px 35px 30px 25px;
border-image:url("images/borderImage2.jpg") 40 35 30 25/40px 35px 30px 25px;
border-image:url("images/borderImage2.jpg") 40/40px repeat;
border-image:url("images/borderImage2.jpg") 40/40px round;
border-image:url("images/borderImage2.jpg") 40/40px stretch;

在这里插入图片描述
对border-image属性添加fill参数时，该div的中心区域将会被边框图像填充

border-image:url("images/borderImage2.jpg") 40 fill/40px stretch;

在这里插入图片描述

4.内边距padding

  • 内边距（padding）是指内容区与边框之间的距离
  • 通过padding-top、padding-right、padding-bottom和padding-left属性对元素的“上右下左”四个方向的内边距进行设置
  • 通过padding属性可以在一个样式声明中设置该元素的所有内边距
    在这里插入图片描述
    在这里插入图片描述
padding:10px; 
padding:10px 20px;
padding:10px 20px 30px;
padding:10px 20px 30px 40px;
/*第5个元素使用分写形式*/
padding-top:10px;
padding-right:20px;
padding-bottom:30px;
padding-left:40px;

在这里插入图片描述

5.外边距padding

外边距（margin）是指元素与元素之间的距离，即围绕在元素边框之外的空白区域，通过外边距可以为元素创建额外的“空间”。

外边距与内边距相似，可以对“上下左右”四个外边距分别进行设定，也可以统一进行设定。
在这里插入图片描述
在这里插入图片描述

5.1 外边距的基本用法
/*第一幅图像*/
margin:10px 20px 30px 40px;
/*第二幅图像*/	
margin-left:10px;
/*第三幅图像*/
margin-left:15px;
margin-bottom:20px;

在这里插入图片描述

5.2 外边距合并

外边距合并（叠加）是指当两个页面流中的块级元素的垂直外边距相遇时，将形成一个外边距。
合并后的外边距的高度，等于合并前的两个外边距中的较大者。

  1. 上下元素间的外边距合并
    当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距将发生合并
    在这里插入图片描述
    由于外边框合并，此处代码删掉，不影响显示效果
.topDiv{
       margin-bottom:20px;
}
.bottomDiv{
      margin-top:10px;      
}

在这里插入图片描述

  1. 包含元素间的外边距合并
    当一个元素包含在另一个元素中，父元素没有内边距和边框，且子元素没有外边距时，父元素与子元素的上边距（或下外边距）也会发生合并。
    在这里插入图片描述

  2. 空元素的外边距合并
    空元素只包含外边距而无边框和填充时，上外边距与下外边距就会碰到了一起，元素的上下外边距也会产生合并。
    在这里插入图片描述
    当合并后的外边距再次遇到其他元素的外边距时，还会发生合并操作
    在这里插入图片描述
    外边距合并时，只有普通的页面流中块级元素的垂直外边距会发生外边距的合并。
    行内元素、浮动元素和绝对定位元素之间的外边距不会进行合并。

6.DIV+CSS页面布局

  • 页面布局的核心目标是实现页面的结构与外观相分离，常见的布局方式有三种：表格布局、框架布局和DIV+CSS布局。
  • 表格布局不足：当页面布局需要调整时，往往需要重新制作表格。而多重表格的嵌套时，由于标签的层次过深，页面不利于搜索引擎的抓取。
  • 框架布局不足：
    1. 但一个页面会依赖多个页面，不方便进行管理；
    2. 搜索引擎对框架中的内容检索时存在困难，有些搜索引擎只会检索框架集页面，导致页面检索不完整；
    3. 框架对打印支持效果不够好，只能实现分框架页面的打印；
    4. 在HTML 5中不再支持<frameset>标签。
  • DIV+CSS布局优点：可以简化页面的代码量，提高页面的浏览速度；其结构清晰，代码嵌套层次少，容易被搜索引擎检索到；页面结构与表现相分离，便于维护与扩展。
  • DIV+CSS页面布局，以下图为例，页面被分为五部分：
    1. 横幅（banner）
    2. 导航（navigator）
    3. 焦点内容（focus）
    4. 主体内容（content）
    5. 版权（footer）
      在这里插入图片描述

总结

  • 盒子模型是由border（边框）、margin（外边距）、padding（内边距）、content（内容）
  • 内容区（content）是盒子模型的中心，也是盒子模型必不可缺少的部分
  • 元素的边框（border）就是围绕元素内容和内边距的一条或多条线
  • 边框圆角由两个圆弧共同构成，HR代表圆角的水平半径，VR代表圆角的垂直半径
  • 内边距（padding）是指内容区与边框之间的距离，可以对“上右下左”四个方向的进行设置
  • 外边距（margin）是指元素与元素之间的距离
  • 外边距合并（叠加）是指当两个垂直外边距（块级元素）相遇时，将形成一个外边距
  • DIV+CSS布局
今天也是爱大大的一天吖
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
13.web前端开发技术-页面布局
白山茶ι的博客
11-15 980
页面布局概述 核心目标是实现页面的结构与外观的分离 表格布局：常用于页面局部布局 框架布局：主页面依赖多个页面，不便管理，HTML5不再支持框架集标签<frameset>和<frame>,但是支持页内框架标签<iframe> css+Div布局:页面结构与表现相分离，常用于页面的整体布局 CSS+DIV布局>盒子模型 盒子模型由内容(content...
web前端实验复习资料.zip
04-27
3. **布局模式**：流体布局、网格布局、Flexbox（弹性盒布局）和Grid（网格布局）是常见的CSS布局方式，用于创建响应式和适应各种屏幕尺寸的设计。 4. **响应式设计**：使用媒体查询（media queries）根据设备特性...
集美大学web前端设计与开发课堂小测&期末考试题库
集美大bug的博客
06-30 4762
集美大学web前端设计与开发课堂小测&期末考试题库 第一章测试 选项中加粗的为答案 1.图片的边框可以通过( )设定宽度。 A.width B.height C.border D.align 2.关于超链接，( )属性用于规定在何处打开链接文档。 A.href . B.target C.title D.onclick 3.( )是在新窗口打开网页文档。 A _blank B_self C_parent D._new 4.建立锚点后,便可以创建锚点链接,需要用( )号以及锚点名称作为( )属性值。 答
前端不完整复习片段
weixin_44145580的博客
02-24 61
HTML html语言为超文本标记语言，用来描述页面内容的显示方式。 html文档结构由html、head、body三大元素组成。 head元素包括title（对页面进行设置）和meta（对搜索引擎进行设置）。 文本元素包括内容标题、文本修饰、特殊字符。 标签包括标签名、属性、内容。 标签语义h1 h2 h3表示大纲级别，div、span、p表示布局。 文档结构元素包括段落标签p、换行标签br、...
网页制作DIV+css之导航布局
慕容绝艳的博客
08-11 929
Mini-Tab Preview <!-- .container { width: 500px; padding: 15px; margin: 3px 0 20px 0; border: 1px solid #ccc; backgro
CSS+DIV页面布局
08-24 3109
CSS+DIV页面布局   利用HTML表格和无数字体标签来组织和修饰基于Web的内容的时代正在走向没落。近一段时期来，层叠样式表（CSS）和层(div)结合使用，进行网页布局正在填补布局这一功能。 一、页面布局与规划 这是XHTM
Web前端技术（期末复习 选填、判断、简答、编程等超全总结）.zip
07-17
这份名为"Web前端技术（期末复习 选填、判断、简答、编程等超全总结）.zip"的压缩包文件包含了全面的Web前端学习资源，适合期末复习和备考。以下是基于该压缩包文件可能包含的知识点的详细说明： 1. HTML...
Web前端全栈HTML5+大神之路.zip
12-15
【标题解析】：“Web前端全栈HTML5+大神之路”这一标题暗示了这是一个关于Web前端开发的学习资源，特别强调了HTML5技术，并且提出了“全栈”和“大神之路”的概念。全栈开发意味着这个课程或资料不仅涵盖了前端的...
1+X Web前端开发（初级）讲义
最新发布
08-20
- **布局**：涉及`<head>`和`<body>`标签，`<meta>`、`<title>`、`<link>`、`<style>`等标签的用途，以及CSS在控制页面样式和布局中的作用。 3. **HTML标签详解** - **块级标签**：占据一整行，可以容纳其他块级...
《Web前端网页制作》答案.rar
08-19
此压缩包"《Web前端网页制作》答案.rar"包含了大工20春学期该课程的大作业答案，对于正在学习或复习这门课程的学生来说，可能是一个宝贵的参考资料。 首先，我们要理解HTML（HyperText Markup Language）是网页的...
div p span标签获取焦点并复制标签内容
qq_38121975的博客
06-22 1404
vue项目开发过程遇到从接口中获取的一连串sql语句，根据项目需求在页面进行换行显示并可以进行复制，同时支持ctrl + a 和ctrl + c的快捷键复制 首先将从后端接口中获取的字符串中的\n转换为 this.logDetail = this.detailData.sql.replace(/\n/g, '<br/>') 页面展示要换行展示 <div class="statement" tabindex="0" id="sqlDetail" contenteditable="true
CSS3的背景、边框和边距相关属性
湮顾千古的博客
01-27 4037
CSS3 包含多个新的背景属性，它们提供了对背景更强大的控制，进一步增强了背景功能，这些属性可以控制背景图片的显示位置、分布方式等；除此之外，CSS3还新增了多背景图片支持，从而允许我们在HTML组件中定义多个背景图片。CSS3还新增了大量边框相关属性，通过这些属性可以让我们定义圆角边框、渐变边框、图片边框等。 背景相关属性 背景相关属性用于控制背景色、背景图片等属性。在控制背景图片的同时，还...
（html+css）一个完整的网页主页布局：logo+导航+banner+新闻列表...
热门推荐
qq_33569780的博客
05-19 4万+
作者是一只在web前端上探索进步的小白白..... （本篇代码中的banner图我还没学习完，所以暂时放的不规范哈，正式的话应该放在banner_con这个盒子里面的，我随后会回来补充正确放置的方法的！） ps:差点因为不会用编辑器而写不了博客QAQ........太蠢了 index.html(主页-结构) <!DOCTYPE html> <!-- 声明文档类型--> <html lang="en"> <!-- 确定语言形态 --> <head&
DIV CSS 布局定位 实例 菜单导航 详解
eagleking012的专栏
09-22 483
为什么要用Div Css可以简单的作如下解释： 当时创造WEB的那个人也发明了用TABLE布局，当TABLE布局泛滥之后，然后他说:我创造了WEB也毁了WEB，TABLE布局会给一个网页带来大量无意义的语句难以阅读。TABLE是来干什么的，TABLE是表格,从来都不是用来布局用的,现在我们要使TABLE重新开始显示它自己的意义:表示表格数据.所以TABLE根本不应该...
CSS页面布局及排版
qq_43283474的博客
08-08 1439
文章转自：https://blog.csdn.net/Ranchonono/article/details/68187642?biz_id=102&utm_term=CSS&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-0-68187642&spm=1018.2118.3001.4187 CSS页面布局及排版 一、CSS盒子模型 CSS将每个元素看成是一...
前端-css总结
qq_39009130的博客
06-15 343
二.CSS 1.概述 1.样式包含 选择器 声明：（属性名：属性值;） 2.CSS基本格式 选择器{属性名：属性值;} 2.CSS样式的三种格式 优先级：内嵌式>内部式>外部式 内嵌式：在html标签的style中编写样式 <div style="color: red;"></div> 内部式：在该html页面的style编写样式 <style type="text/css"> .myclass{ color: red;
常用网页布局（div+css）之一
weixin_30644369的博客
10-13 110
乘着闲暇时间，自己弄了个web，主界面是用div+css布局，用ajax+javascript进行界面控制及获取数据！我就说说其中的div+css布局。整个页面分为三大块，可以称之为：页眉（站标+横幅），主体（左边菜单+右边内容），页脚（显示版权及备案等信息）。三大块我用position:relative;相对定位来设置，这样有个好处，就是当某一块内容太多要阔涨时，其它部分也会相应的调整...
css3使用技巧：细线边框的3种不同的写法
weixin_34268169的博客
11-27 106
一般的app边框描边的线都小于一像素，那么我就像往常一样直接描了1px的边框，虽然是1px可是结果和app里的描边完全不一样“粗了”，所以就在网找了一下看看有没有解决方法，可是找了一会没找到，那咋办，需求方不愿意不要这么粗，那就只能自己解决了。 1，首先想到的方法是做一张高2像素（1像素有颜色1像素没颜色）的图片做背景，bg-size设置宽100%，高1px .line li{ ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值