首页
Python
Java
IOS
Andorid
NodeJS
JavaScript
HTML5
【
HTML、CSS知识点,面试开发都会需要--No.3 盒子模型
】的更多相关文章
HTML、CSS知识点,面试开发都会需要--No.3 盒子模型
No.3 盒子模型 1.盒子模型属性 (1)包含的CSS属性:width.height.padding.border.margin. 1.盒子模型属性 (1)包含的CSS属性: width.height.padding.border.margin. (2)盒子模型宽度计算: margin-right + border-right + padding-right + width + padding-left + border-left + margin-left. (3)盒子模型高度计算: mar…
HTML、CSS知识点,面试开发都会需要--No.7 数据列表
No.7 数据列表 1.无序列表Unordered List 无序列表用block-level元素ul(unordered list)表示,每个item单独使用li(list)标记.如下代码所示: <ul> <li>Orange</li> <li>Green</li> <li>Blue</li> </ul> 2.有序列表Ordered List (1)和无序区别:无序的每一项默认使用”.”表示,而有序的项通过数…
HTML、CSS知识点,面试开发都会需要--No.4 内容布局
No.4 内容布局 1.列举场景 同一行布局三个元素.三个元素等比显示,并且其他元素不会围绕这三个元素.如下要让下面的三个column等比显示在一行: 2.通过Float属性实现 (1)float:left, 对于块级别的div可设置float:left让几个元素同行显示.但需要阻止其他元素追尾. (2)解决追尾方案一:在Column3的后面添加一个div,并设置css属性:clear:both.这个大家应该都很熟悉. (3)解决追尾方案二:设置容器的公共class样式,设置class的befo…
HTML、CSS知识点,面试开发都会需要--No.2 CSS
No.2 CSS 1.选择器类型 选择器类型包括:type.class.id. 2.引用外部css文件 使用link元素,添加rel和href属性:<link rel="stylesheet" href="main.css" />. 3.重置浏览器的css样式 (1)为什么重置: 每个浏览器都有自己默认的选择器样式设置,例如元素的margin和padding.为了保持网站的统一性,我们需要重置CSS样式. (2)怎样重置:把下面的css样式添加到定义的…
HTML、CSS知识点,面试开发都会需要--No.1 HTML
No.1 HTML 1.网页结构 网页结构一般都包含文档声明DOCTYPE,并且在head中的meta应该包含编码格式.关键字.网页描述信息.简单格式如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hello World</title> </head> <body> </body> </ht…
HTML、CSS知识点,面试开发都会需要--No.6 设置背景
No.6 设置背景 1.background (1)如何设置背景:背景可通过color.image.gradient渐变或者组合方法设置. (2)background-color:颜色格式可以是十六进制或者rgb以及rgba.为了保证兼容性,有些浏览器不支持rgba,需要在设置rgba之前添加一个十六进制设置.如下: div { background-color: #b2b2b2; background-color: rgba(0, 0, 0, .3); } (3)background-imag…
HTML、CSS知识点,面试开发都会需要--No.5 文章段落
No.5 文章段落 1.文字属性 文字属性包含font-*和text-*两类. 2.基于font的属性 (1)font-family:字体属性,多个字体之前用逗号隔开.如果第一个字体没找到,则依次找后面的字体.例如: body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } (2)font-size:字体大小,单位包括pixels, em units, percentages, points. (3)fo…
CSS.03 -- 浏览器行高、字体;盒子模型--边框、内边距、外边距
如果此时你也在自学中,请使用 FireWorks CS6 进行切图测距等,百度一下吧~ Fireworks的基本使用 新建文件 ctrl+n 打开文件 ctrl+o 调出和隐藏标尺 ctrl+r 清除辅助线: 视图---辅助线----清除辅助线 放大镜 z 放大镜状态下alt+鼠标左键 缩小 抓手 快捷键 空格 测量距离 ★先拉出2根辅助线 再在抓手的状态下按下shift即可: CSS行高 line-height 浏览器默认文字大小: 浏览器默认文字大小: 16p…
css知多少(7)——盒子模型
1. 引言 从这一节开始,我们就进入本系列的第三部分——css呈现.本部分将描述css在页面的几种布局和呈现的特性.包括两类:文字.块. 第一类——文字.这部分相对比较简单一些,例如设置字号.字体.颜色.背景色.是否加粗等.重点的地方在于设置字体.设置行高.文字相关的距离都用相对值,这些东西在<css知多少(4)——解读浏览器默认样式>那一节已经说过了.另外还有一个重点,就是web端最流行的字体库fontAwesome,关于它我之前有一篇文章专门讲过,请参见<请用fontAwesome代…
深入理解CSS盒子模型
在CSS中浮动.定位和盒子模型,都是很核心的东西,其中盒子模型是CSS很重要基石之一,感觉还是很有必要把CSS盒子模型相关知识更新一下...... CSS盒子模型<BoxModel>示意图 通过CSS盒子模型示意图所示,我们知道由内到外内容<content>.填充<padding>.边框<border>.外边距<margin>组成盒子模型 CSS盒子模型宽度 a.设置固定宽度的情况下,在盒子模型中,在没有使用box-sizing情况下,设置的宽度…