CSS 之 核心篇
来源:互联网 发布:软件行业税负 编辑:程序博客网 时间:2024/06/14 14:54
前提:
块级元素:div标签为为块级元素,在网页上表示为占满一行的
行内元素:span标签为行内元素,的长度只和字符的长度有关
小例子:
<span style="font-size:18px;"><div class="menu">阿猫</div> <span class ="menu">阿狗</span> <span class="menu">阿兔</span><span class="title">f阿牛</span></span>
效果:
行内元素转换为块级元素的方法,例:将span标签的美容转换成也横跨一整行的方法
<span style="font-size:18px;"><span class ="menu ttt " >阿狗</span></span>
小例子:
<span style="font-size:18px;">.ttt{ display:block;}</span>
效果:
标准流
概念:标签的排列方式,显示的时候按照书写的顺序进行排列。比如上例中的阿猫和阿狗的显示顺序以及样式页的优先级都和标准流相关。
盒子模型
我们在网页设计中常听的属性名:内容(content)、填充(padding)、边框(border)、边界(margin), CSS盒子模式都具备这些属性。这些属性我们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也就是能装东西的一种箱子,也具有这些属性,所以叫它盒子模式。
盒子模型分为外边距:border(top,bottom,left,right),内边距:padding(top,bottom,left,right),内容:content(width,height),画框:margin(top,bottom,left,right)
每个标签就相当于一个盒子。通过盒子模型来设置每个标签的内外边距。
小例子(1):
<span style="font-size:18px;">.menu{ /*栏目样式*/ color:#00f; /*文字颜色*/ background-color :#ffd800; border-width:5px; border-color :#0ff; border-style:solid;}</span>
小例子(2)
<span style="font-size:18px;">内边距属性写法 /*padding-top: 5px; padding-left : 5px; padding-bottom : 5px;*/ /*padding: 5px;*/ /*如果据上下左右的边距一样的话可以这样写* padding:5px 6px 7px 8px; /*默认的是逆时针上右下左的顺序*/ </span>外边距(margin)和内边距的写法相同写法(注意上下两个栏目都有外边距时,则两个之间的距离取最大值)
效果:
注意:行内样式对边距,长等即盒子模型都是没有响应的。浮动
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于盒子模型是针对块级元素的,通过浮动可以让块级元素排成一行。脱离了标准流。
小例子:
<span style="font-size:18px;">float:left ; /*盒子向左浮动*/</span>
效果:
<span style="font-size:18px;">clear:left; /*清除浮动*/</span>给大家推荐一个对浮动介绍的比较详细的网址:http://www.w3school.com.cn/css/css_positioning_floating.asp
定位
relative,相对定位。定位某一个块级元素,没有脱标准流。相对于原来的位置。所以阿猫的位置还是相对于原来阿狗的位置。<span style="font-size:18px;">position:relative; /*相对定位*/ top:20PX;</span>
absolute,绝对定位。相对于盒子之外更外一层盒子,脱离了标准流。
点睛:盒子模型是一个伟大的模型,通过和实际生活相结合,我们在网页设计的格式掌握的更加透彻和简单。
1 0
- CSS 之 核心篇
- CSS学习篇核心之——盒子模型
- CSS学习篇核心之——定位
- CSS gradient渐变之webkit核心浏览器下的使用
- CSS gradient渐变之webkit核心浏览器下的使用
- CSS gradient渐变之webkit核心浏览器下的使用
- CSS gradient渐变之webkit核心浏览器下的使用
- CSS gradient渐变之webkit核心浏览器下的使用
- CSS gradient渐变之webkit核心浏览器下的使用
- CSS 核心概念归纳之定位和 BFC
- 003 Python前端之CSS核心属性与浮动
- 核心游记之 史前篇
- CSS核心--盒子模型
- CSS核心--盒子模型
- CSS---核心模块
- Html+Css核心
- css核心知识汇总
- CSS核心属性
- org.springframework.beans.factory.parsing.BeanDefinitionParsingException
- 安卓触摸事件与点击事件的区别(Touch&Click)
- CSS中#和.的区别
- Swift自适应布局(Adaptive Layout)教程(一)Autolayout
- Swift自适应布局(Adaptive Layout)教程(二)Autolayout
- CSS 之 核心篇
- Eclipse 常用快捷键 (动画讲解)
- java程序员在面试时的注意事项
- 如何用Entity Framework 6 连接Sqlite数据库
- Spring 注解 @Resource和@Autowired的区别
- C# DataTable详细用法
- QTableWidget用法总结
- 产品经理入门到大神的资料全推荐
- #include<bits/stdc++.h>包含C++的所有头文件