03-页面布局[Python]
一、盒子模型
盒模型: 是CSS的基石,指定标签如何显示。它规定了网页元素如何显示以及元素间相互关系。 页面上的每个元素都被当成一个矩形盒子、占据一定的页面控件,这个盒子由内容(content)、内边距(补白/填充/padding)、边框(border)和外边距(margin)组成;
【padding一般用于调整内容位置,margin一般用于调整盒子位置】
![](/assets/blank.gif)
![](/assets/blank.gif)
![](/assets/blank.gif)
二、填充padding
填充: padding,在设定页面中一个元素内容到元素的边缘(边框)之间的距离,也称之为补白;用法:> 用来调整内容在容器中的位置关系;> 用来调整子元素在父元素中的位置关系;注: padding属性需要添加在父元素上;> padding值是额外加载元素原有大小之上的,如果想要保证元素大小不变(盒子大小),即元素宽高上减去添加的padding属性值;说明:可单独设置方向填充,如:padding-top: 10px; padding-right: 10px;padding-bottom: 10px;padding-left: 10px;属性值的4种方式:四个值:上 右 下 左 { padding: 10px 20px 30px 40px; } 注: 起点在12,顺时针方向三个值:上 左右 下 { padding: 10px 20px 30px;}二个值:上下 左右 { padding: 10px 20px;}一个值:四个方向 { padding: 2px; }定义元素四周填充为2px
三、边框border
简写方式: border: 3px solid red; // 粗细(数值+单位) (solid/dashed/dotted/double) 颜色说明: 右边框:border-right:线型(solid/dashed/dotted/double) 粗细(数值+单位) 颜色;左边框: border-left:线形(solid/dashed/dotted/double) 粗细(数值+单位) 颜色;上边框: border-top:线形(solid/dashed/dotted/double) 粗细(数值+单位) 颜色;下边框: border-bottom:线形(solid/dashed/dotted/double) 粗细(数值+单位) 颜色;备注: border-width 边框的粗细border-style 边框的线型border-color 边框的颜色solid:实线,dashed:虚线,dotted:点状线,double:双线
四、外边距margin
边界: margin,在元素外边的空白区域,被称之为边距;说明:margin-left: 10px;margin-right: 10px;margin-top: 10px;margin-bottom: 10px;属性值的4种方式:四个值:上 右 下 左 {margin: 10px 10px 10px 10px;}三个值:上 左右 下 {margin: 10px 20px 10px;}二个值:上下 左右 【margin: 0 auto; 即表示上下边距为0,左右边距为自动】一个值:四个方向 margin:2px; 定义元素四边边界为2px
五、浮动属性
语法: float:none/left/right;说明:float:定义网页中其它文本如何环绕该元素left:元素活动浮动在文本左面right:元素浮动在右面none:默认值,不浮动。备注:浮动框可以向左或右边移动,直到它的边缘碰到包含边框或另外一个浮动框的边框为止;浮动框是脱离了普通的文档流;例如:#box{width:300px; height:300px; background: red}#minBox1,#minBox2,#minBox3{width:100px; height:100px;}#minBox1{background:blue; float:right;}#minBox2{background:purple; }#minBox3{background:gray; float:}
![](/assets/blank.gif)
六、position 定位
语法:position:static /absolute/relative/fixed
static: 默认值,无特殊定位,对象遵循HTML原则;
absolute: 绝对定位,将对象从文档流中拖离出来,使用left/right/top/bottom等属性相对其最接近的一个并有定位(absolute/relative)设置的父元素进行绝对定位;若没有父元素,则以html、body,浏览器的位置为相对位置,而其层叠通过z-index属性定义;(相对于谁?)
relative: 相对定位,对象不可层叠,将依据right,top,left,bottom(相对定位)等属性在正常文档流中偏移位置(相对于谁呢?相对于它自己本身,即是在原来位置上偏移,而且注意原有位置就是在保留的);
fixed: (固定定位),对象定位遵从绝对定位方式;
例如: 教室中的学生位置,绝对定位就像是大学的教室位置,人不在了,其他人就可以占用这个位置;
而相对位置就像小学生,请假了,虽然人不在,但是其他同学也不能占他的位置;
虽然学生都不在位置上,但是两种效果是不同的;
七、绝对定位和相对定位的区别
- 参照物不同,绝对定位的参照物是包含块(父级),相对定位的参照物是元素本身位置;
- 绝对定位将对象从文档流中拖离出来因此不占据空间,相对定位不破坏正常的文档流顺序无论是否进行移动,元素仍然占据原来的空间;
八、包含块的概念及作用
- 包含块是绝对定位的基础,包含块就是为决定定位元素提供坐标,偏移和显示范围的参照物,即确定绝对定位的偏移起点和百分比长度的参考;【包含块是参照物】
- 默认状态下,body是一个大的包含块,所有绝对定位的元素都是根据窗口来定自己所处的位置和百分比大小的显示的,如果我们定义了包含元素为包含元素块以后,对于被包含的绝对定位元素来说,就会根据最接近的具有定位功能的上级包含元素来定位自己的显示位置。
(定义元素为包含块:给绝对定位元素的父元素添加声明position:relative;)
九、定位元素层叠属性
语法:z-index : auto | number // 检索或设置对象的层叠顺序说明:auto:默认值,遵从其父对象;number:无单位的整数值,可为负数;备注:> 较大 number 值的对象会覆盖在较小 number 值的对象之上。如两个绝对定位对象的此属性具有同样的 number 值,那么将依据它们在HTML文档中声明的顺序层叠;> 此属性仅仅作用于 position 属性值为 relative 或 absolute 的对象;> 除了可以调整层级以外,其实可以通过层级将某元素给隐藏;
![](/assets/blank.gif)
十、溢出属性overflow
语法:overflow:visible/hidden(隐藏)/scroll/auto(自动)/inherit;说明:visible:默认值,内容不会被修剪,会成现在元素框之外;hidden:内容会被修剪,并且其余内容是不可见的;scroll:内容会被修剪,但是浏览器会显示滚动条,以便查看其余的内容;auto:如果内容被修剪,则浏览器会显示滚动条,以便查看其他的内容;inherit: 规定应该从父元素继承overflow属性的值(父级元素是什么属性值,它就是什么属性值);
问题1: 如果大盒子中嵌套小盒子,为了防止小盒子在设置margin时,大盒子受到的影响(小盒子顶部没有任何的效果),解决方式是在大盒子中添加overflow:hidden;属性;
问题2: 同级盒子中,如果出现都添加margin值,在重合位置中(上下),会有问题,只有最大值有效(而不是两个值之和margin-bottom + margin-top);
十一、文本溢出属性text-overflow
语法:text-overflow: clip / ellipsis说明:clip:不显示省略号(...),而是简单的裁切;(不显示省略号)ellipsis:当对象内文本溢出时,显示省略标记;(显示省略号)
text-overflow属性,当文本溢出时是否显示省略标记,并不具备其它的样式属性定义,要实现溢出时产生省略号的效果还需定义:
1、容器宽度: width:value;(px、%,都可以);
2、强制文本在一行内显示: white-space:nowrap; // nowrap属性:文本不会换行,文本会在同一行上继续,直到遇到
标签为止(pre和nowrap样式一样);
3、溢出内容为隐藏: overflow:hidden;
4、溢出文本显示省略号: text-overflow:ellipsis;
http://www.taodudu.cc/news/show-6023901.html
相关文章:
- 搭建自己的外卖红包平台,操作外卖CPS实现躺赚
- [Note] 多项式全家桶 小球与盒子 分拆数
- 企业文档管理难题,云盒子来解决!
- 04、HTMLCSS-盒子模型
- (16)全民小视频引流脚本模块化开发10-发送图片私信By飞云脚本学院
- 路由器的两种工作模式
- 路由器硬件框图
- 【SDN】普通路由器刷OpenWrt+OpenFlow教程完美版_搭建SDN OpenFlow1.3协议的路由器(Flash<16M)
- 计算机网络实验:CISCO IOS 路由器基本配置
- 金刚经白话
- 佛说,是我们自己苦了自己~
- 佛说,是我们自己苦了自己
- 佛说譬喻经
- 生死
- 【无标题】三星Xpress M2020打印机刷免芯片
- 干货,看微信小程序后台用户数据如何演变和递增
- DataV(对象类)未来三天天气状态显示对应图标,格式:{ “results“:[ { “location“:{},“daily“:[ {},{}] ] }
- 开源多云应用平台 Choerodon猪齿鱼发布0.14版本
- 多云时代下数据管理技术_建立一个混合的多云数据湖并使用Apache Spark执行数据处理...
- 纯css实现乌云密布的天气图标
- Bootstrap自定义上传文件图标样式并使用ajax及formData进行上传
- jenkins基础知识
- skycons.js 基于canvas的天气动态图标小插件
- OpenShift 4 - 多云管理(2) - 向多云的集群部署应用(附视频)
- 【CSDN AI周刊】第16期 | 黄仁勋怒怼TPU 龙之队惜败冷扑大师
- 自定义View-仿QQ运动步数进度效果(完整代码)
- 3.Android 仿QQ运动步数进度效果 keep运动效果(从入门到巅峰)
- android 自定义园动画,Android 自定View实现仿QQ运动步数圆弧及动画效果
- 自定义View - 仿QQ运动步数效果
- android 自定义view实现仿QQ运动步数进度效果
03-页面布局[Python]相关推荐
- Python+Flask实现全国、全球疫情大数据可视化(二):网页页面布局+echarts可视化中国地图、世界地图、柱状图和折线图
文章目录 相关文章 一.实现效果 二.页面布局html+css main.html main.css 三.echarts图表制作 1.全国累计趋势折线图ec_l1.js 2.全国趋势变化折线图ec_l ...
- 后台管理页面布局(左侧导航长度根据右侧内容无限延伸)
2019独角兽企业重金招聘Python工程师标准>>> 如图为标准后台管理页面布局,左侧导航布局一般是设置高度100%来适应所有尺寸的显示器打开的浏览器高度. 但是这种布局会 ...
- Windows phone 7之页面布局
Windows phone的页面布局方式一般是依赖布局控件实现的,而布局控件有三种Grid,StackPanel和Canvas Grid是网格布局方式,相当于一个表格,有行和列,新建一个Windows ...
- 三级菜单页面布局_三级菜单的最快导航布局
三级菜单页面布局 重点 (Top highlight) When users navigate an interface, there's a need for speed. The faster i ...
- web前端(12)—— 页面布局2
本篇博文,主要就讲定位的问题,也就是页面布局里最重要的,本篇博文不出意外的话,也是css的最后一篇博文了 定位,position属性 定位有三种: 相对定位 绝对定位 固定定位 相对定位,positi ...
- vue在html中写style,vue开发之style(六)(CSS页面布局之样式、背景、文字)
最近在学vue开发,并且将学习笔记与大家一起分享,前面讲了vue环境的搭建: 基于vscode的Vue前端环境搭建问题及解决办法 还有vue的使用,重点就在webpack这个: vue开发之webpa ...
- 影响页面布局的css属性,6 和页面布局有关的CSS属性(三)
6 和页面布局有关的CSS属性(三) 03.png 04.png 05.png #box { /* 声明ID选择器,名称为box */ position:absolute; /* 设置层的定位为绝对定 ...
- 04-前端技术_盒子模型与页面布局
目录 三,盒子模型与页面布局 1,网页布局介绍 1.1 固定布局 1.2 流式布局(Liquid Layout) 1.3 栅格化布局 1.4 自适应布局(Adaptive Layout) 1.5 响应 ...
- 如何删除下一页分节符_页面布局里分节符添加的下一页空白页怎么删 - 卡饭网...
word2010怎么插入分节符 word2010怎么插入分节符 通过在Word2010文档中插入分节符,可以将Word文档分成多个部分.每个部分可以有不同的页边距.页眉页脚.纸张大小等不同的页面设置. ...
- 【秃头系列】-【本科生毕设论文格式Word】自动生成页面布局
文章目录 01 - 页面布局 02 - 如何自动生成 2.1 - 格式约定 2.1 - 设置页边距 2.2 - 设置页眉 2.3 - 设置页脚 2.3 - 善后操作 03 - 操作GIF 3.1 - ...
最新文章
- 基于富盛SBO程序开发框架的自动序列生成器
- python批处理文件_Python文件夹批处理操作代码实例
- 多域型SSL证书和通配型证书安装指南- iis 6.0 (windows 2003)
- Cygwin 的代理设置(同 Linux)
- 特例模式(Special Case Pattern)与空对象模式(Null Pointer Pattern)—— 返回特例对象而非 null
- Hybrid APP介绍
- java后台实现弹窗提示_java后台代码弹窗
- 计算机主机有自带的声音吗,Windows XP 系统中没有音频设备,怎么办?
- 页面置换模拟程序c语言,LRU页面置换算法模拟
- 【老文档】20190331省电功能性文档
- graphpad xy轴互换_GraphPad Prism的双Y轴作图
- linux pam limits.so,linux – 即使需要pam_limits.so,ulimit也不会读取打开文件描述符limits.conf设置...
- ps如何快速消除黑眼圈或者眼袋
- 【AI-CPS】【大数据】NeuSeer平台助力工业大数据服务商
- Records of Reinfocement Learning Experiments
- CentOS7安装nVidia驱动以及CUDA,一遍成功
- 连载8年的神书《宰执天下》完结,力争第四届橙瓜网络文学奖前十
- 2018(第二届)全球物联网大会在京召开,四化核心推动物联网产业发展
- Fitnesse初体验(介绍、下载、安装)
- swfobject加载flash