文档章节

Css使用说明

哎那个新来的
 哎那个新来的
发布于 2017/04/27 11:14
字数 850
阅读 71
收藏 0

1.块级元素和行内元素的相互转换 【display:inline-block;vertical-align:top;】

2.对于元素 使用padding来填充,改变元素的大小 ,使用padding来填充大小,里面的文字自动会居中;对于行内元素使用inner-block修饰以后,使用width和height设置大小,文字不会居中,需要使用line-height和text-aligen来修饰居中

3.使用border-radius:6px 0 0 6px 来改变元素上下左右的圆角

4.层级结构的编写,

5.外层的宽度和高度不设置,让内部的元素来撑起

6.margin 来改位置

6.或者在div中对于他的子元素设置 position:relative 和left .top来实现位置

7. ul标签中也可以使用 text-align:center; 设置 子标签居中

8.字体改变颜色直接有color, 背景颜色 background

9.position:abosulute 使用时,它的父元素设置为position:relative,否则相对于body

10.display:inner-block 的注意:元素之间都 4px的间隔

11.position:relative相对于自己定位,移动以后,他原来的位置占有空间,如果标签宽和高变化,它原来的位置的宽和高也跟着变化。

12.块级元素和行内元素的区别:

每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,成为“块级”元素(block-level);而span元素的默认display属性值为“inline”,称为“行内”元素。
div这样的块级元素,就会自动占据一定矩形空间,可以通过设置高度、宽度、内外边距等属性,来调整的这个矩形的样子;与之相反,像“span”“a”这样的行内元素,则没有自己的独立空间,它是依附于其他块级元素存在的,因此,对行内元素设置高度、宽度、内外边距等属性,都是无效的。【1.行内元素在同一水平线上排列,水平排列;块级元素单独占一行,下一个块级元素会从新的一行开始;2.块级元素可以包含块级元素和行内元素,行内元素不可以包含块级元素;3.行内元素设置宽和高无效,他根据包含的内容的大小决定自身的宽和高,同时可以设置padding来改变自身的大小】

当display:inner-block: 设置的元素既有行内元素的性质也有块级元素的性质

13:不用display:inline-block,可以使用line-height设置来实现一些功能,在一些行内元素中不设置border属性是没有的border的,设置了border以后,才可以设置border-width,但是input标签是默认具有input的。例如设置b标签的高度和input标签高度一致的时候,可以考虑到这些情况

14:设置float和absolute以后会破坏父元素的文档流结构,所以要对于float的要加清楚浮动,在有些地方需要给该元素的父元素加上清楚浮动

15.元素内容的垂直居中:该方法适用于单行文本(或图片)的垂直居中,我们需要做的仅仅是将line-height属性设置的大于font-size,且等于容器的高度。

© 著作权归作者所有

共有 人打赏支持
哎那个新来的
粉丝 0
博文 92
码字总数 29196
作品 0
闸北
程序员
沉冰浮水/Grunt-For-ZBlog

##Grunt For Z-Blog ###置百丈玄冰而崩裂,掷须臾池水而漂摇。 使用说明要写完整要很大一坨呢,,而这个只有我自己可能会用的样子。。 Grunt怎么用自己百度,按需配置package.json文件。 基本...

沉冰浮水
2015/02/17
0
0
我今天升级了nginx到了tengine最新版本,发现。。。

发现 footer filter模块功能 对html静态有效插入预设变量,php就没看到插入。 我拿了个简单的 phpinfo() 测试,结果还是没看到。 还有那个合并css的使用说明...

主编
2012/03/24
2.7K
4
缪斯的情人/Puerh

##介绍 Puerh,百姓网 UI 库。旨在建立稳定、简洁、兼容的前端框架。已经通过 Mac/Windows 下的 IE6+ / Firefox / Google Chrome 浏览器测试。Puerh 的目标是构建一套适合百姓网的前端解决方...

缪斯的情人
2015/02/11
0
0
JQuery动态隐藏和显示DIV

JQuery动态隐藏和显示DIV 1. 如果在载入是隐藏: <head><script language="javascript">function HideWeekMonth(){ }</script></head> <body onLoad="HideWeekMonth()"></body> 2. 动态隐藏和......

LeBlancs
2016/12/22
81
0
基于 Amazeui 扩展的 Upload 组件--Amaze UI Upload

Amaze UI Upload 插件。 使用说明: 获取 Amaze UI Upload 在 Amaze UI 样式之后引入 Upload 样式( 目录下的 CSS): Amaze UI Upload 依赖 Amaze UI 样式。 <link rel="stylesheet" href=......

匿名
2016/12/27
190
0

没有更多内容

加载失败,请刷新页面

加载更多

what f,,

anlve
23分钟前
0
0
初级开发-编程题

` public static void main(String[] args) { System.out.println(changeStrToUpperCase("user_name_abc")); System.out.println(changeStrToLowerCase(changeStrToUpperCase("user_name_abc......

小池仔
今天
9
0
现场看路演了!

HiBlock
昨天
19
0
Rabbit MQ基本概念介绍

RabbitMQ介绍 • RabbitMQ是一个消息中间件,是一个很好用的消息队列框架。 • ConnectionFactory、Connection、Channel都是RabbitMQ对外提供的API中最基本的对象。Connection是RabbitMQ的s...

寰宇01
昨天
13
0
官方精简版Windows10:微软自己都看不过去了

微软宣布,该公司正在寻求解决方案,以减轻企业客户的Windows 10规模。该公司声称,企业客户下载整个Windows 10文件以更新设备既费钱又费时。 微软宣布,该公司正在寻求解决方案,以减轻企业...

linux-tao
昨天
20
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部