CSS的常用属性(二)
盒子模型之边框
border-(top/bottom/left/right)-style: solid 边框的风格 如(solid 实线,dotted 点线,dashed 虚线)
border-top-color: #aaa 边框颜色
border-top-width: 20px 边框粗细
边框四个方向连写: 如 border-color: #000
边框属性连写: border-top: #555 solid 5px
四个方向边框属性同写: border: 12px dashed 10px
注意: 没有顺序要求,但边框风格也就是线型不能少
补充:
边框合并: border-collapse: collapse
去掉边框: border: 0 none
去掉路轮廓线: outline-style: none
盒子模型之内边距
padding-left: 20px;
padding-right: 10px;
padding-top: 30%;
padding-bottom: 40%;
属性连写:
padding: 20px; 上下左右都为20px
padding: 10px 20px; 上下为10px,左右为20px
padding: 10px 20px 30px; 上内边距为10px,左右为20px,底为30px
padding: 10px 20px 30px 40px; 上10px,右20px,下30px,左40px
注意: 给盒子指定宽高,在里面使用padding会撑大盒子
补充: 盒子的宽度等于: 定义的宽度+边框宽度+左右内边距
盒子模型之外边距
margin(与内边距使用方法相似): margin: 20px
margin: 20px auto (auto表示自适应,个人理解就是居中)
补充: 两个盒子垂直,上面的盒子设置下边距。下面的盒子设置下边距,两个盒子的边距取设置边距大的那个
解决:嵌套的盒子外边距塌陷
当给子盒子里设置如margin-top: 10px时,父盒子相对于顶部向下移动了10px,而子盒子相对于父盒子没有移动
两种方法解决: 第一个是给父盒子设置一个边框;第二个方法是给父盒子设置: overflow: hidden;(内容溢出元素框时隐藏)
补充: 行内元素可以定义左右的内外边距,上下会被忽略;行内块可以定义内外边距
浮动布局
float: left / right
特点:
元素浮动后不占据原来的位置(脱标)
浮动的盒子在一行显示(除非边框已经无法容纳)
行内元素浮动后会转化成行内块元素
清除浮动的方法:
clear: left / both / right 用的最多的是clear: both
第一种方法: <div style="clear: both;"></div>
第二种方法: overflow: hidden
注意: 如果内容出了盒子,则不能使用这个方法
第三种方法: 伪元素清除浮动(推荐使用)
.clearfix:after{
content: ".";
display: block;
height: 0;
line-height: 0;
visibility: hidden; 规定元素不可见(但会占据页面上的空间)
clear: both;
}
兼容IE浏览器:
.clearfix{
zoom: 1;
}
CSS的常用属性(二)的更多相关文章
- CSS的常用属性
刚开始学习前段的我,还处于初级阶段,一些东西还是会有搞不明白的时候,还是要大家多多理解.今说就一些关于CSS的常用属性吧! 一.CSS常用选择器 CSS选择器应该说是一个非常重要的工具吧,选择器用得好 ...
- CSS样式常用属性整理
web工程师是最近5年刚刚兴起的一门高薪职业,人们的专注度越来越高. 那么前端除了学习html标签之外还需要掌握什么知识点呢? 为大家整理了一个和HTML标签密不可分的知识要点--<CSS样式常 ...
- CSS 背景常用属性
CSS 背景常用属性 background-color 这个属性过于简单, 以下写法均可 background-color:red; background-color:rgb(0,0,255); ba ...
- css 样式常用属性
一般的一个DIV的CSS设置属性有:margin,padding,width,height,font-size,text-align,background,float,border 附:< cs ...
- css+div常用属性备忘录
学习软件设计有一年多了,明年五月就要毕业了.回头看看发现自己其实挺差劲的. 最近开通了博客所以就整理了一下笔记,在这里发布一下自己以前学习css时总是记不住去翻书又很常用的属性,都是一些很基础的. 大 ...
- CSS HTML 常用属性备忘录
学习软件设计有一年多了,明年五月就要毕业了.回头看看发现自己其实挺差劲的. 最近开通了博客所以就整理了一下笔记,在这里发布一下自己以前学习css时总是记不住去翻书又很常用的属性,都是一些很基础的. 大 ...
- css之常用属性
背景属性: background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动 值: scroll 默认值.背景图像会随着页面其余部分的滚动而移动. fixed 当页面的其余部 ...
- CSS的常用属性(一)
文本属性 font-size: 16px 文字大小 font-weight: 700 文字粗细 值从100-900 (值为700看上去加粗了) 不推荐使用font-weight: bold font- ...
- CSS的常用属性(三)
静态定位 position: static (默认) 标准流 绝对定位 position: absolute 特点: 元素使用绝对定位之后,不占据原来的位置(脱标) 元素使用绝对定位,位置是从浏览器出 ...
随机推荐
- How To:配置Linux iSCSI客户端
1.安装客户端 [root@node01 Packages]# rpm -Uvh iscsi-initiator-utils-6.2.0.873-2.el6.x86_64.rpm warning: i ...
- A water problem (hdu-5832)
不多说就是一个数对两个数的乘积求模运算 不得不说vj上这个题的翻译版本真是太暴力了 难点 主要还是时间的控制,这题太容易TLE了.用到的算法就是大数求余数的ans=(ans*10-a[i]-'0')% ...
- Nginx配置文件的高亮显示设置
linux系统下vim或者vi编辑器默认是没有对nginx的语法高亮设置. 1.下载vi语法高亮配置到 ~/.vim/syntax,如果不存在则创建该目录,cd ~/.vim/syntax wget ...
- zk strom 本地环境启动命令
bin/zkServer.sh statusbin/zkServer.sh startbin/storm nimbus &bin/storm ui &bin/storm drpc &a ...
- Silverlight之我见——数据批示(2)
接着上一回的话题,继续来研究数据批示特性,先拿简单的RageAttribute来弄弄,接着上次的示例,添加一个Age属性,并加上RangeAttribute. [Range(20,60,ErrorMe ...
- JavaScript进阶----关于数字的方法,Math对象,日期对象,定时器,函数,for in
关于数字的方法: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- Maven学习总结(2)——Maven项目构建过程练习
Maven学习总结(二)--Maven项目构建过程练习 上一篇只是简单介绍了一下maven入门的一些相关知识,这一篇主要是体验一下Maven高度自动化构建项目的过程 一.创建Maven项目 1.1.建 ...
- CodeForces - 205B - Little Elephant and Sorting
先上题目: Little Elephant and Sorting time limit per test 1 second memory limit per test 256 megabytes i ...
- 开启mysql远程连接
mysql默认只允许本地连接,也就是说,在安装完mysql后会存在两个root账户,他们的host分别是localhost和127.0.0.1 use mysql; update user set h ...
- 35岁,成就寥寥,为时已晚?(I am 35 and I haven't achieved much in life. Is it too late?)
今天无意中看到Quora上的一个问题: I am 35 and I haven't achieved much in life. Is it too late? 下面的一个排第二的回复我蛮喜欢的,直接 ...