CSS元素分类
快级元素:在html中<div>,<p>,<h1>,<form>,<ul>,<li>就是块级元素。
设置display:block就是将元素显示为块级元素。
将行内元素a转换为块级元素,从而使a元素具有块级元素特点
a{display:block;}
行内元素:在html中,<span>,<a>,<label>,<input>,<img>,<strong>,<em>就是典型的行内元素
display:inline
内联块状元素:同时具备内联元素,块状元素的特点,代码:display:inline-block
<img>,<input>标签就是这种内联块状标签
盒模型:
边框:就是围绕着内容及补白的线,这条线可以设置它的粗细,样式和颜色(边框三个属性)
div{
border:2px solid red;
}
注意:
border-style(边框样式)常见形式:
dashed(虚线) dotted(点线) solid(实线)
border-color(边框颜色)颜色可以设置为十六进制颜色
若想为p标签单独设置下边框,而其他三边都不设置边框样式:
div{border-bottom:1px solid red;}
宽度和高度:css定义的宽和搞指的是填充以里的内容范围。
一个元素实际宽度=左边界+右边界+左填充+内容宽度+右填充+右边框+右边界
元素的实际长度为:10px+1px+20px+200px+20px+1px+10px=262px
填充:元素内容与边框之间是可以设置距离的,称之为“填充”;填充也可分为上,右,下,左(顺时针)
div{padding:20px 10px 15px 30px;}
四个方向分别为 padding-top padding-right padding-bottom padding-left
边界:元素与其它元素之间的距离可以使用边界(margin)来设置,边界也是可以分为上,右,下,左
div{margin:20px 10px 25px 30px;}
四个方向分别为:margin-top margin-right margin-bottom margin-left
CSS元素分类的更多相关文章
- Web前端开发基础 第四课(CSS元素分类)
元素分类 在讲解CSS布局之前,我们需要提前知道一些知识,在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的块状元素有: <di ...
- CSS元素分类及区别
元素是文档结构的基础,在CSS中,每个元素生成了一个包含了元素内容的框(box,也译为“盒子”).但是不同的元素显示的方式会有所不同,例如<div>和<span>就不同,而&l ...
- CSS——元素分类
1.标签元素被分为三大类:块状元素.内联元素和内联块元素. (1)常见块状元素有:<div>.<p>.<h1>...<h6>.<ol>.&l ...
- CSS基础学习-7.CSS元素分类
- CSS学习笔记之元素分类
在讲解CSS布局之前,我们需要提前知道一些知识,在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的块状元素有: <div> ...
- 深入css布局篇(1) — 盒模型 & 元素分类
深入css布局(1)-- 盒模型 & 元素分类 " 在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深 ...
- CSS中的元素分类
CSS中的元素分类 元素是文档结构的基础,在CSS中,每个元素生成了一个包含了元素内容的框(box,也译为"盒子").但是不同的元素显示的方式会有所不同,例如<div> ...
- css的书写位置+元素分类
1.css的书写位置 1>行内样式: <span style="color:red;">haha</span> 2>内部样式 在style标签中 ...
- HTML标签元素分类(HTML基础知识)
HTML标签元素分类 一.按照块级元素还是行内元素分类 块级元素(block-level)和行内元素(inline-level,也叫作"内联"元素). a.块级元素(独占一行) 块 ...
随机推荐
- Ubuntu16.04安装ROS-kinetic
参考链接:http://www.voidcn.com/blog/wishchin/article/p-5972036.html 第一步: 软件源配置1. 增加下载源(增加ubuntu版的ros数据仓库 ...
- 数据结构--栈的应用(表达式求值 nyoj 35)
题目链接:http://acm.nyist.net/JudgeOnline/problem.php?pid=35 题目: 表达式求值 时间限制:3000 ms | 内存限制:65535 KB描述 AC ...
- Linux root 密码重置与用户管理
---forget root password restart your linux system press 'e' when start. press 'e' again then choose ...
- 动手学习TCP:数据传输
前面的文章介绍了TCP状态变迁,以及TCP状态变迁图中的一些特殊状态. 本文主要看看TCP数据传输过程中需要了解的一些重要点: MSS(Maximum Segment Size) Seq号和Ack号的 ...
- 如何在TFS的过程模板中添加报表
在新建团队项目的过程中,TFS的"新建团队项目向导"会根据用户选择的过程模板类型(CMMI, Scrum,Agile等)自动为团队项目创建一个SSRS(SQL Server Rep ...
- android开发中的变量名称
非公有的变量前面要加上小写m, 静态变量前面加上小写s, 其它变量以小写字母开头, 静态变量全大写 例子 public class MyClass { public static final int ...
- Codeforces Zepto Code Rush 2014 -C - Dungeons and Candies
这题给的一个教训:Codeforces没有超时这个概念.本来以为1000*(1000+1)/2*10*10要超时的.结果我想多了. 这题由于k层都可能有关系,所以建一个图,每两个点之间连边,边权为n* ...
- POJ 1195 Mobile Phones
树状数组,开始的时候wa了,后来看看,原来是概率论没学好,以为求(L,B) - (R,T) 矩阵内的和只要用sum(R+1,T+1) - sum(L,B) 就行了,.傻x了.. 必须 sum(R,T) ...
- 解决svn的working copy locked并且cleanup恢复不能的情况
产生这种情况大多是因为上次svn命令执行失败且被锁定了. 如果cleanup没有效果的话只好手动删除锁定文件. cd 到svn项目目录下,然后执行如下命令 del lock /q/s 就把锁删掉了.
- Linux系统批量化安装部署之Cobbler
说明: Cobbler服务器系统:CentOS 5.10 64位 IP地址:192.168.21.128 需要安装部署的Linux系统: eth0(第一块网卡,用于外网)IP地址段:192.168.2 ...