自适应页面的实现方式

2018-07-25
阅读 4 分钟
45.8k
1.简易场景实现自适应:浮动、页面居中、元素宽度不写固定而设置百分比自动匹配大小。这样在页面宽度发生变化时,能利用以上特性实现简易的自适应效果。2.如果实际开发中有复杂场景的需求,一般通过编写多套CSS代码,然后用媒体查询技术,让页面根据不同屏幕尺寸来加载不同代码模块以实现适配不同屏幕的目的。这种方式需...

BFC-块格式化上下文(block formatting context)

2018-07-25
阅读 2 分钟
1.5k
BFC(block formatting context)块格式化上下文, 是Web页面块级元素布局及浮动元素彼此交互的区域。BFC是一个独立的布局环境,(实际页面渲染时是不可见的),由BFC构建的区域其内部元素的布局是不受外界的影响的,利用这个特性可用来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响。在BFC中元素从顶端开始垂...

CSS 3-浮动、定位

2018-05-29
阅读 3 分钟
4.3k
文档流是一种默认定位方式,在文档流中元素框的位置由元素在html中的位置决定,文档流中元素的position属性为默认的static或继承来的static并按照普通流定位。块级元素独占一行,自上而下排列;内联元素从左到右排列。让元素脱离文档流有三种方法:浮动float;绝对定位position:absolute;固定定位position:fixed;元素脱离...

CSS2-盒模型、背景图片

2018-05-28
阅读 3 分钟
2.6k
margin外边距(top,right,bottom,left)border边框(top,right,bottom,left)padding内边距(top,right,bottom,left)content内容区(width,height)margin,border,padding值的书写方法:margin-top/-right/-bottom/-leftmargin:10px 11px 12px 13px; 上右下左的顺序margin:10px 12px;简写即上下10px,左右12px;margin:10px; 即...

CSS 1-选择器

2018-05-24
阅读 3 分钟
2.1k
1.id选择器 #id{ } ,“#id”选中元素2.类选择器 .class{ } ,“.类名称”选中元素3.标签选择器 div{ } ,“标签名”选中元素4.通配符选择器 { } ,""选中所有元素5.组合选择器:分组选择器 E,F “,”逗号隔开,同时选中E,F元素后代选择器 E F 空格隔开,选中E元素下的所有F元素(无论F元素嵌套多少层一样会被选中)直接子选择器 E ...

HTML 3-列表、表单、语义化

2018-05-23
阅读 5 分钟
2.8k
1.有序列表ol>li;列表有顺序编号(默认列表前加1.,2.,3.,...编号),适用于有逻辑顺序的排列项目,而且次序不能乱。2.无序列表ul>li;列表无顺序(默认列表前加"."),适用于并列显示的项目,项目无先后顺序3.自定义列表dl>dt表头>dd表内容,dt为项目名称,dd项目名称的描述,一个项目名称可以有多个项目...

HTML 2-行高、a标签

2018-05-21
阅读 2 分钟
5.2k
line-height设置文本的行高,行高即文本行基线之前的距离,行高减去字体大小就等于行间距从上到下四条线分别是顶线、中线、基线、底线,很像学英语字母时的四线三格,vertical-align属性中有top、middle、baseline、bottom,就是和这四条线相关。注意,基线不是最下面的线,最下面的是底线。行高是指上下文本行的基线间的...

HTML 1-样式引入、路径、尺寸单位

2018-05-21
阅读 3 分钟
2.6k
3.css样式导入,link和import方式【1】.link链接<link href="main.css" rel="stylesheet" type="text/css" />【2】.import导入 <style type="text/css">@import "blue.css"</style>注:三种css引入方式的优先级,内联式》嵌入式》导入式。嵌入式>导入式有一个前提:嵌入式css样式的位置一定在外部式...