css学习笔记——绘制属于你的缤纷世界
以下为本人做项目中所遇到的常用css样式,在此记录并与大家分享。
本博文同实时更新。
border :
border 简写属性在一个声明设置所有的边框属性。
可以按顺序设置如下属性:
border-width 线宽
border-style 线型
border-color 颜色
线型solid表示实线
padding:
padding:10px 5px 15px 20px;
上内边距是 10px
右内边距是 5px
下内边距是 15px
左内边距是 20px
display:
display 属性规定元素应该生成的框的类型。
值 | 描述 |
---|---|
none | 此元素不会被显示。 |
block | 此元素将显示为块级元素,此元素前后会带有换行符。 |
inline | 默认。此元素会被显示为内联元素,元素前后没有换行符。 |
inline-block | 行内块元素。(CSS2.1 新增的值) |
list-item | 此元素会作为列表显示。 |
run-in | 此元素会根据上下文作为块级元素或内联元素显示。 |
compact | CSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。 |
marker | CSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。 |
table | 此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。 |
inline-table | 此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符。 |
table-row-group | 此元素会作为一个或多个行的分组来显示(类似 <tbody>)。 |
table-header-group | 此元素会作为一个或多个行的分组来显示(类似 <thead>)。 |
table-footer-group | 此元素会作为一个或多个行的分组来显示(类似 <tfoot>)。 |
table-row | 此元素会作为一个表格行显示(类似 <tr>)。 |
table-column-group | 此元素会作为一个或多个列的分组来显示(类似 <colgroup>)。 |
table-column | 此元素会作为一个单元格列显示(类似 <col>) |
table-cell | 此元素会作为一个表格单元格显示(类似 <td> 和 <th>) |
table-caption | 此元素会作为一个表格标题显示(类似 <caption>) |
inherit | 规定应该从父元素继承 display 属性的值。 |
margin:
margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。
例子 1
margin:10px 5px 15px 20px;
上外边距是 10px
右外边距是 5px
下外边距是 15px
左外边距是 20px
例子 2
margin:10px 5px 15px;
上外边距是 10px
右外边距和左外边距是 5px
下外边距是 15px
例子 3
margin:10px 5px;
上外边距和下外边距是 10px
右外边距和左外边距是 5px
例子 4
margin:10px;
所有 4 个外边距都是 10px
可能的值
值 | 描述 |
---|---|
auto | 浏览器计算外边距。 |
length | 规定以具体单位计的外边距值,比如像素、厘米等。默认值是 0px。 |
% | 规定基于父元素的宽度的百分比的外边距。 |
inherit | 规定应该从父元素继承外边距。 |
css学习笔记——绘制属于你的缤纷世界相关推荐
- CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法
CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法 参考文章: (1)CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法 (2)https://www.cnblogs. ...
- 前端篇--------1.css学习笔记
1.css 单行文本换行溢出解决方案(css三件套) white-space:nowrap overflow:hidden text-overflow:ellipsis 2.css m ...
- HTML/CSS学习笔记03【CSS概述、CSS选择器、CSS属性、CSS案例-注册页面】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
- HTML/CSS学习笔记02【表单标签】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
- HTML/CSS学习笔记01【概念介绍、基本标签】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
- CSS学习笔记 display属性
CSS学习笔记05 display属性 HTML标记一般分为块标记和行内标记两种类型,它们也称块元素和行内元素. 块元素 每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度.高度.对齐等属性, ...
- CSS学习笔记-04 a标签-导航练习
个人练习,各位大神勿笑 .. <!DOCTYPE html> <html lang="en"> <head><meta charset= ...
- div+css学习笔记一(转)
div+css学习笔记一 (2011-05-12 07:32:08) 标签: div css 居中 背景图片 ie6 ie7 margin 杂谈 分类: 网页制作 1.IE6中用了float之后导致m ...
- HTML+CSS学习笔记(3)- 认识标签(2)
HTML+CSS学习笔记(3)- 认识标签(2) 1.使用ul,添加新闻信息列表 在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表.图片列表, 这些列表就可以使用ul-li标签来完成.ul-l ...
最新文章
- java读取pdf_Java 读取PDF中的文本和图片的方法
- dubbo提供者主配置文件application.properties
- [转载] Java中的字符串处理
- nlp基础—10.结巴分词的应用及底层原理剖析
- sqlmap DVWA脱库
- 大学算法分析与设计复习总结
- 深圳必去的50个免费景点 景色绝美
- Windows下使用命令修改文件权限和所有者
- 写作历时一个月,长达8000字的年终总结——[2022年终总结]不要怕,请勇敢的向前走
- 维瓦尔第协奏曲《四季》赏析 (Antonio Vavildi 《The Four Seasons》)
- 直方图均衡化(II)
- SQL之LEFT JOIN,EIGHT JOIN,INSERT JOIN的区别
- 全光谱防蓝光护眼灯有用吗?怎么分辨是全光谱灯
- JDSU故障测试仪维修OTDR光时域反射仪维修MTS2000
- 蝉知企业门户系统 6.2 发布,新增随机区块的功能
- 连锁电商 电商+店商 平台搭建及私域运营方案
- 数据传输的常用格式(转载博主「落花别有意 流水似无情」)
- 套接字创建、连接和关闭函数
- 解决robotiq_85机械爪在gazebo中散架(关节解体)的问题
- 有限理性模型(转载)
热门文章
- github copilot X - chat 使用体验分享
- 笔记本电脑开始栏通知栏打不开
- Android中Apk签名文件不一致问题解决方案
- 亚马逊、阿里国际、Shopee、Temu等跨境电商平台测评自养号经验分享
- C++牛顿迭代法求根,用递归方法实现分析及代码
- 私域直播系统优势,具备这些功能点才叫系统
- java记事本实验总结_第十四周课程总结实验报告(简单记事本的实现)
- 滴滴下架140天,出行的战争远未结束!
- 易语言修改html内容,易语言修改网页标题源码
- cvFloor(),cvCeil(),cvRound()函数解释