文档章节

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
博文 88
码字总数 27242
作品 0
闸北
程序员
沉冰浮水/Grunt-For-ZBlog

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

沉冰浮水
2015/02/17
0
0
缪斯的情人/Puerh

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

缪斯的情人
2015/02/11
0
0
我今天升级了nginx到了tengine最新版本,发现。。。

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

主编
2012/03/24
2.7K
4
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

没有更多内容

加载失败,请刷新页面

加载更多

下一页

[雪峰磁针石博客]软件测试专家工具包1web测试

web测试 本章主要涉及功能测试、自动化测试(参考: 软件自动化测试初学者忠告) 、接口测试(参考:10分钟学会API测试)、跨浏览器测试、可访问性测试和可用性测试的测试工具列表。 安全测试工具...

python测试开发人工智能安全
今天
2
0
JS:异步 - 面试惨案

为什么会写这篇文章,很明显不符合我的性格的东西,原因是前段时间参与了一个面试,对于很多程序员来说,面试时候多么的鸦雀无声,事后心里就有多么的千军万马。去掉最开始毕业干了一年的Jav...

xmqywx
今天
2
0
Win10 64位系统,PHP 扩展 curl插件

执行:1. 拷贝php安装目录下,libeay32.dll、ssleay32.dll 、 libssh2.dll 到 C:\windows\system32 目录。2. 拷贝php/ext目录下, php_curl.dll 到 C:\windows\system32 目录; 3. p...

放飞E梦想O
今天
0
0
谈谈神秘的ES6——(五)解构赋值【对象篇】

上一节课我们了解了有关数组的解构赋值相关内容,这节课,我们接着,来讲讲对象的解构赋值。 解构不仅可以用于数组,还可以用于对象。 let { foo, bar } = { foo: "aaa", bar: "bbb" };fo...

JandenMa
今天
1
0
OSChina 周一乱弹 —— 有人要给本汪介绍妹子啦

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @莱布妮子 :分享水木年华的单曲《中学时代》@小小编辑 手机党少年们想听歌,请使劲儿戳(这里) @须臾时光:夏天还在做最后的挣扎,但是晚上...

小小编辑
今天
54
8

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部