文档章节

Css使用说明

哎那个新来的
 哎那个新来的
发布于 2017/04/27 11:14
字数 850
阅读 71
收藏 0
点赞 0
评论 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
博文 85
码字总数 26715
作品 0
闸北
程序员
沉冰浮水/Grunt-For-ZBlog

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

沉冰浮水 ⋅ 2015/02/17 ⋅ 0

jquery+css3美化select下拉列表框特效

表单在网页上的使用是很广泛的,但表单的单一性与它的特性决定了对它的美化通过CSS样式是很难达到我们想要的效果的,所以往往会通过js+css样式的效果来代替表单上的一些功能。select下拉列表...

板蓝根 ⋅ 2013/12/05 ⋅ 0

缪斯的情人/Puerh

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

缪斯的情人 ⋅ 2015/02/11 ⋅ 0

我今天升级了nginx到了tengine最新版本,发现。。。

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

主编 ⋅ 2012/03/24 ⋅ 4

JQuery动态隐藏和显示DIV

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

LeBlancs ⋅ 2016/12/22 ⋅ 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 ⋅ 0

Jquery 分页插件--myPagination

使用说明: 一 ,需要JQuery 库文件和myPagintion 库文件 功能介绍: 1 支持 初始化页数 2 支持 总页数 初始化,自动从服务器获取总页数进行计算 3 支持 自定义页码数量 4 自带 24 种 开源C...

曹霖峰 ⋅ 2011/06/29 ⋅ 6

Dabblet,简洁实用的 HTML 和 CSS 代码段在线测试工具

跨浏览器兼容,对前端攻城师们来说是一个不得不处理的问题。为了在浏览器间呈现统一的显示效果,攻城师们不仅要为每个游览器添加CSS前缀,甚至还需要用到一些特殊的CSS Hack技巧。于是,jsF...

虫虫 ⋅ 2012/02/16 ⋅ 3

bootstrap-switch开关按钮表单插件

bootstrap-switch插件这是一个针对Bootstrap实现的开关(switch)按钮控件,可以支持尺寸、颜色等属性的自定义。开关式按钮在国内网站上使用的并不是很多,Bootstrap 的应用在国外非常流行,...

板蓝根 ⋅ 2014/02/17 ⋅ 0

艾润物联/vehicle-keyboard-js

停车王车牌号码专用键盘 VehicleKeyboard - vue.js 是停车王品牌的各端产品线的基础组件,专为提高中国车牌号码输入速度而定制开发的专用键盘组件,包括以下三个项目: Android项目,为Andro...

艾润物联 ⋅ 2017/11/09 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

思路分析 如何通过反射 给 bean entity 对象 的List 集合属性赋值?

其实 这块 大家 去 看 springmvc 源码 肯定可以找到实现办法。 因为 spirngmvc 的方法 是可以 为 对象 参数里面的 list 属性赋值的。 我也没有看 具体的 mvc 源码实现,我这里只是 写一个 简...

之渊 ⋅ 23分钟前 ⋅ 0

vim使用手册--配对括号的查找

1、把光标放在标记有(、[或{处。 2、按%字符 3、此时光标的位置应当在配对的括号处 4、再次按%就可以跳回配对的第一个括号处。

dragon_tech ⋅ 27分钟前 ⋅ 0

c++ 、object-c printf,%02X和%x有什么区别 ?

%x即按十六进制输出,英文字母小写,右对齐。 %02X有以下变化:英文字母变大写,如果输出字符不足两位的,输出两位宽度,右对齐,空的一位补0。超过两位的,全部输出。 如果不用 %02x 会出现...

yizhichao ⋅ 32分钟前 ⋅ 0

Spring源码解析(七)——实例创建(中)

前言 上一节讲到了,Spring 会根据实例的作用域执行不同的创建逻辑,分别是 Singleton、Prototype、其他 Scope,其中 Singleton 会调用 getSingleton 从缓存中获取,缓存中没有才会创建实例;...

MarvelCode ⋅ 32分钟前 ⋅ 0

Thrift RPC实战(六) spring集成thrift

1.服务端设置 对泛型Thrift Service的支持, 通过采用spring配置以及反射的方式来实现.对于一个服务提供者来说,需要提供端口,接口以及接口实现类,因此在接口中spring配置文件中配置如下 <!...

lemonLove ⋅ 35分钟前 ⋅ 0

oracle11g自动分区使用

为什么使用自动分区? 在oracle11g之前,oracle是不支持自动分区功能的,这就可能导致我们系统在运行一段时间之后,就需要看看分区是否创建或者写触发器进行创建分区,否则就会导致数据无法入...

strict_nerd ⋅ 46分钟前 ⋅ 0

Spring mvc ViewResolver视图解析器实现机制

概要 我们在controller里面经常这样return一个ModelAndView。 return new ModelAndView("userList", "users", userList); DispatcherServlet 靠 ViewResolver 把 userList 解析为 /WEB-INF......

轨迹_ ⋅ 59分钟前 ⋅ 0

策略模式

1.策略模式 策略模式是同一个行为的不同处理办法。策略模式和简单工厂模式的区别:1.策略模式主要是方法的执行方式,工厂模式要获取的对象。两者的侧重点不同。 ...

Cobbage ⋅ 今天 ⋅ 0

行政区划代码转为字典形式

原数据为: http://www.mca.gov.cn/article/sj/xzqh/2018/201804-12/201804-06041553.html 手动替换了一下格式,并使用下面的代码处理. # 输入格式s = """110000:北京市110101:东城区1101...

漫步海边小路 ⋅ 今天 ⋅ 0

android apk 签名

创建key,需要用到keytool.exe (位于C:\Program Files\Java\jdk1.6.0_10\bin目录下),使用产生的key对apk签名用到的是jarsigner.exe (位于C:\Program Files\Java\jdk1.6.0_10\bin目录下),把...

国仔饼 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部