H5~居中、盒模型、float(浮动)、position(定位)等问题
来源:互联网 发布:古代西亚北非文明知乎 编辑:程序博客网 时间:2024/06/07 06:37
<!DOCTYPE html><html><head><meta charset="utf-8"><title>准备</title></head><body><!-- 标签:块属性标签:div(常用来布局划分区域)p(段落) h1~h6(标题)特点:支持宽高 独占一行 支持所有css样式行属性标签: span(文字) a(超链接)特点:不支持宽高 排成一排 不支持上下的margin和padding行块属性标签: img(图片)特点:既支持宽高 又排成一行//a标签取出默认样式a{text-decoration:none;}//列表标签去除默认样式ul{list-style:none;}*********************************************************************************CSS的三种引入方式:行间样式:在标签中写入style属性样式写在style中(最不常用,优先级最高)内部引入方式:在head中写入style标签 样式写在style标签中外部引入方式:在head中 使用link标签引入外部css文件(开发中使用最多)注意: 外部和内部引入方式优先级相同,文档后面的会覆盖前面的。********************************************************************************选择器:标签选择器:语法——> 标签名{样式}class选择器:语法:“.”+class名{样式}特点:1. 优先级比标签选择器高,2.一个标签可以有多个class名3.不同标签可以使用相同的class名。后代选择器:语法:父选择器 空格 子选择器{样式}优先级为 选择器权重相加(class权重为10 标签选择器权重为1)//id选择器:#box{ }//组合选择器:div,p{}**************************************************************************盒模型:margin(外边距)用来调整元素位置,相对于父元素的边缘或相邻元素注意: 元素的第一个子元素的margin-top会传递给父元素,解决方案是:给父元素设置overflow:hidden;border(边框)一般设置三个参数 分别为 边框颜色 边框宽度 边框样式(常用实线 solid)三个参数没有顺序例如: border:1px solid black;padding(内边距)内容区域距离元素边缘的距离1.内容不会占用padding的位置 2.padding的颜色和背景颜色相同注意:border和padding都会让元素变大补充内容: border-radius(圆角度)圆角度的值为 圆角的半径*********************************************************************************float(浮动):浮动包括left和right(左、右浮动)设置浮动是为了让块属性元素可以排成一排1.浮动可以使用行属性元素支持宽高2.浮动具有流式布局效果和文字环绕效果3.浮动会有脱离文档流效果浮动的影响:如果父元素没有高度,靠子元素撑开。当子元素浮动,脱离文档流,父元素则不会被撑开进而失去高度,这样会影响布局解决方案:给父元素设置overflow:hidden;*********************************************************************************position(定位):fixed(固定定位):相对于浏览器可视窗口,一般用于悬浮窗,小广告,返回顶部等按钮功能;relative(相对定位)定位相对于它原来的位置,一般配合子元素的 绝对位置(absolute)使用。absolute(绝对定位):定位现对于拥有定位的父级元素,如果父元素没有定位,则一直向上查找有定位的祖先元素直到body为止。注意:定位只适用于,某一个模块中的摸个小部件(小模块),不可以使用于大方围布局。绝对定位大多数情况配合父元素的相对定位使用,可以搭配记忆;********************************************************************************居中问题:水平居中:块属性元素水平居中:给需居中的元素设置 margin:0 auto;行属性/行块属性/文本元素水平居中:给父元素设置 text-align:center;垂直居中:大部分情况,没有捷径,使用margin或者定位调整。单行文本/行属性标签 垂直居中 设置 line-height:父元素高度;******************************************************************************display:display:block;把元素转化为块属性;display:inline;把元素转化为行属性display:inline-block;把元素转化为行块属性(最常用,让行块属性元素支持宽高)display:none;隐藏 (常用来制作动态效果)*******************************************************************************hover:hover规定了 鼠标移入元素后展示的效果,hover只能控制它本身或者子元素例如:控制本身选择器:hover{鼠标移入的效果}控制子元素父选择器:hover 空格 子选择器{鼠标移入的效果} --></body></html>
阅读全文
1 0
- H5~居中、盒模型、float(浮动)、position(定位)等问题
- 盒模型+float浮动元素+position定位
- css知识点(position-float-定位-浮动)-20141022
- Float浮动和position定位
- float(浮动)模型
- CSS概念之定位体系(绝对定位position/浮动float/display)
- position 定位法,float浮动法
- css-4(浮动:float 定位:position)
- css的文档流,float浮动和position定位
- position:fixed 固定定位(兼容IE6)问题及关闭浮动框的JS
- Float 水平居中浮动
- 精通css(4)-盒模型,定位,浮动
- 精通css(3) 盒模型,定位,浮动
- position: absolute;绝对定位水平居中问题
- position: absolute;绝对定位水平居中问题
- CSS元素定位--浮动(float)与清楚(clear)
- css中float浮动问题(1)
- css中float浮动问题(2)
- 【自定义View】1.View的滑动
- LeetCode 135 : Candy
- CentOS 6.5 下 CDH 5.2.1 集群安装
- 关于使用file上传图片获取图片绝对路径
- HTML初学习
- H5~居中、盒模型、float(浮动)、position(定位)等问题
- BZOJ 4241 历史研究
- iOS 宏定义~RGB(颜色)
- MySQL数据表中的字段操作
- js的三大核心组成部分
- 数据库日志无法收缩
- WIN7 x64+CUDA8.0+VS2010编译环境搭建
- 互联网思维基础
- div左下角浮动框