Python web前端 04 盒子模型
Python web前端 04 盒子模型
盒子模型是由内容(content)、内边距(padding)、外边距(margin)、边框(border)组成的
一、边框 border
#border 边框
div{border:10px soiled blue}#依次表示border-width(边框宽度)、border-style(类型)、border-color(颜色),这是符合写法 #border-width
#一个值的时候:表示四个方向一样,上右下左(顺时针);
#两个值的时候:上下、右左
#三个值的时候:上、右左、下
#四个值的时候:上、右、下、左 #当然也可以指定某条边的样式
#border-top上(right右、bottom下、left左)-style类型(width宽度、color颜色)
二、内边距 padding
#padding表示内边距,即内容与边框的距离
div{padding:30px;} #表示四个方向的值都一样 #写1-4个值的规则跟border一样都是顺时针 #特殊情况:span 左右有效果,上下没有效果
三、外边距 margin
#margin 外边距 元素与其他元素的距离(边框以外的距离)
div{margin:20px} #1-4个值的时候跟border、padding一样都是顺时针 #如果需要左右居中的是可以margin:auto #注意:垂直方向 margin-top(bottom)取的是两者之间的较大值
# 水平方向 margin-right(left)取的是两者的和 #解决内边距重叠的问题
#当内嵌盒子与外部盒子内边距重叠的时候
overflow:hidden.#给外盒子添加这句话就可以
border:!px soiled red #这两种方法都可以解决这个问题,但是加了border的时候盒子的大小会变化
四、盒子大小
#盒子大小=样式宽+内边距+边框
#盒子宽度=左右border + 左右padding + width
#盒子高度=上下border + 上下padding + height
五、浮动
#浮动:使元素脱离文档流,按照指定(左右)方向发生位移,遇到父级边界或者相邻的浮动元素停下来
#文档流:使文档中可显示对象所占用的位置/空间(在页面中占位置)
#脱离文档流:在页面中不占位置 #清除浮动:1、给父级增加高度(不推荐);2、给父级加overflow:hiddin;(推荐使用)3、给父级加一个类
#类:.clearfix:after{content:"";display:block;clear:both;} #特点:如果只给前面的元素浮动,后面的要占据他的位置 float:left(right)#左右浮动 border-radius:50% #将内部元素变成了圆圈,这个便是快速圆角,也可以写px,1-4个值 #浮动的用途:导航条
六、定位 position
#定位position
#分为 静态定位static、相对定位relative、绝对定位absolute、固定定位fixed
#静态定位:没有定位,默认
#相对定位:相对于正常位置(原来没定位之前的位置)进行定位,还要占据位置
#绝对定位:没有占据位置,是元素完全脱离文档流;
#固定定位:相对于浏览器窗口进行定位 #没有定位父级,则相对于整个文档发生偏移、参考最近非static定位的父级进行定位
#方向词:top left bottom right
z-index #规定定位的层级(默认为0)
#值:number值越打层级越高
#相对定位
position:relative;
left:20px;
top:25px;
#绝对定位
#如果有参照父级,如果父级有,就找父级,没有就继续往上面找 #absolute一般跟相对一起用
#固定定位
#不管浏览器上下怎么滚,这一行必须一直出现,这就得的用到固定定位 div{
position:fixed;
top:0;#既然用到了固定定位,那么就必须制指定位置
left:100;
}
#层级问题
相同元素定位的话遇到重叠的情况会默认出先最后面的元素,如果想要某个元素,可以下z-index=1lai
七、补充
#若要实现页面样式没有的,鼠标移上去出现图标
#例如ul 下的 li #在style里面在原来的样式里面写上:
li{display:none} #在父级元素
ul:hover li{ dispaly:bolck}
Python web前端 04 盒子模型的更多相关文章
- [Web 前端] CSS 盒子模型,绝对定位和相对定位
cp : https://blog.csdn.net/web_yh/article/details/53239372 一.盒子模型: 标准模式和混杂模式(IE).在标准模式下浏览器按照规范呈现页面:在 ...
- Python web前端 09 jQuery
Python web前端 09 jQuery 一.三个重要网址 http://jquery.cuishifeng.cn/ #中文查询网站 http://www.bootcdn.cn/ #引入jq ht ...
- Python web前端 01 HTML常用标签
Python web前端 01 HTML常用标签 一.HTML创建项目 file ---->new project -----> 输入项目名------>创建文件夹 new dicr ...
- Python web前端 02 CSS
Python web前端 02 CSS 一.选择器 1.CSS的几种样式(CSS用来修饰.美化网页的) #建立模板 复制内容--->SETTING---> Editor -----> ...
- Python web前端 03 CSS属性
Python web前端 03 CSS属性 一.文字.文本属性 1.文字属性 font-family #字体类型浏览器默认的字体是微软雅黑,字体中有多个字体的时候,如果前面的字体没有就使用后面的字体 ...
- Python web前端 05 JavaScript
Python web前端 05 JavaScript 一.获取元素 1.初识JavaScript /* .. */ #这是多行注释 // #这是单行注释 #JavaScript是一种脚本语言,是一种动 ...
- Python web前端 06 运算符 循环
Python web前端 06 运算符 循环 一.运算符 #JS六大数据类型 #number 数字 #string 字符串 #boolean 布尔型 #function 函数 #undefined 未 ...
- Python web前端 07 函数及作用域
Python web前端 07 函数及作用域 一.函数 1.有名函数和匿名函数 #函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块 #函数就是包裹在花括号里面的代码块,前面使用了关键字fun ...
- Python web前端 11 form 和 ajax
Python web前端 11 form 和 ajax 一.打开服务器 将handlers.py.httpd.py和libs.py三个文件放入新文件夹中,双击打开httpd.py文件即可 二.ajax ...
随机推荐
- libevent 源码深度剖析十三
libevent 源码深度剖析十三 —— libevent 信号处理注意点 前面讲到了 libevent 实现多线程的方法,然而在多线程的环境中注册信号事件,还是有一些情况需要小心处理,那就是不能在多 ...
- C# 把一个文件夹下所有文件复制到另一个文件夹下 把一个文件夹下所有文件删除(转)
C# 把一个文件夹下所有文件复制到另一个文件夹下 public static void CopyDirectory(string srcPath, string destPath) { try { ...
- dojo模块化开发
转自https://www.cnblogs.com/sharpest/p/6242801.html
- 黑盒测试实践--Day6 11.30
黑盒测试实践--Day6 11.30 今天完成任务情况: 应用设计的场景用例,完成测试用例的编写 完成测试用例在自动化测试工具QTP上的测试 分析测试结果得到缺陷报告 小靳 软件测试 今天主要钻研了q ...
- html5 存储方式
localstorage(永久保存)&&sessionstorage(重新打开浏览器会消失) sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在 ...
- PC/APP/H5三端测试的相同与不同
随着手机应用的不断状态,同一款产品的移动端应用市场占相较PC端也越来越大,那么app与PC端针对这些产品的测试有什么相同与不同之处呢?总结如下: 首先谈一谈相同之处: 一,针对同一个系统功能的测试,三 ...
- ios7适配--navgationbar遮住下面view的处理
3down votefavorite Have you guys stumbled up on this issue ? Basically in iOS 7 Navigation Control ...
- Maven 项目使用开源中国镜像
从maven中央库下载jar非常缓慢甚至有时候会下载不下来. 可以采用中国的maven镜像.目前主要是 开源中国的镜像. 找到maven配置文件setting.xml,打开 中间添加开源中国的配置: ...
- Mac OS X 下android环境搭建
安装jdk6.0版本以支持eclipse的安装 安装eclipse 安装jdk8.0版本,实际开发中用到的jdk 配置java环境变量 打开shell命令窗口(终端) 检测输入java -versio ...
- spring的介绍
Spring是什么: Spring是一个开放源代码的设计层面框架,他解决的是业务逻辑层和其他各层的松耦合问题,因此它将面向接口的编程思想贯穿整个系统应用!!! Spring是一个轻量级的控制反转(Io ...