CSS深入
块元素：div、h1、p等等。
列表的样式：
/*使用系统提供的一些样式：例如无序、有序都可以使用circle*/
ul{
list-style-type: circle;
}
ol{
list-style-type: circle;
}
/*使用图片，实现自定义*/
ul{
/*图片要小一点*/
list-style-image: url("../2.png");
/*list-style: url("../2.png");*/ /*简写: 即image、position、type的事，它都可以干*/
} <ul>
<li>猫</li>
<li>狗</li>
<li>猪</li>
</ul>
添加轮廓，突出内容：
p{
/*使用outline添加一个轮廓：outline相当于一个简写，因为它可以设置所有的轮廓属性*/
outline: auto;
outline-color: aqua;
outline-style: groove;
outline-width: 2px;
}
<p>测试文本</p>
CSS Box Model——对于一个元素而言：
盒子模型包含：content、padding、border、margin。
设置内边距padding：
td{
/*padding: 100px;*/
padding-top: 100px;
padding-bottom: 100px;
padding-left: 100px;
padding-right: 100px;
}
<table border="1">
<tr>
<td>盒子模型padding</td>
</tr>
</table>
设置边框border：
p{
/* 1 样式、border-style: double;*/
/*对每一边进行设置(可以将简写覆盖掉)*/
border-top-style: double;
border-bottom-style: double;
border-left-style: double;
border-right-style: double;
/* 2 宽度、border-width: 2px;*/
border-top-width: 2px;
/* 3 颜色、border-color: red;*/
border-bottom-color: red;
/* 4、CSS3提供边框的：圆角、阴影、环绕图片*/
border-radius: 5px;
box-shadow: 10px 10px 2px red;
/*不用线或者点了，用图片自定义(把前面的宽度、颜色、圆角、阴影注掉)*/
/*border-image: url(http://www.w3school.com.cn/i/border.png) 30 30 round;*/
}
<p>一共定义了10种border-style</p>
外边距margin：
.margin{
/*外边距默认为透明区域，可以接受任何长度单位或百分数*/
/*margin: 100px;*/
/*margin: 0px 10px 15px 20px;*/ /*上、右、下、左(顺时针)*/
margin-top: 100px;
margin-bottom: 100px;
margin-left: 100px;
margin-right: 100px;
}
Box-Model结构设计：
body{
/*将整个页面拟作一个盒子(一个元素)，所以去掉body的干扰*/
margin:;
}
.margin{
margin: 100px;
}
.border{
border: double;
}
.padding{
padding: 100px;
}
.content{
background-color: red;
text-align: center;
}
<body>
<!--描述Box Model的层次结构-->
<div class="margin">
<div class="border">
<div class="padding">
<div class="content">Box Model</div>
</div>
</div>
</div>
</body>
外边距合并（位置上的重叠）：
/*重叠后，取margin较大者，作为新margin*/
.margin-one{
margin-bottom: 100px;
}
.margin-two{
margin-top: 50px;
} <!--只有垂直方向存在合并-->
<div class="margin-one">margin-one</div>
<div class="margin-two">margin-two</div>
CSS定位：
定位的思想：定义该元素，相对于其正常、父元素、其他元素、浏览器窗口的位置。
三种基本的定位机制：普通流、绝对定位、浮动。默认所有框都在普通流中定位。
块级框之间的距离，只由框之间的垂直margin计算。行框：一行所有的框组合而成。
所有元素都是框：行内框inline+块框block，通过display更改
<a href="">a不设置</a>
<a href="" style="display: block">a设置block</a>
让指定元素没有框，因此不显示(没有框占文档的空间)
<p style="display: none">p设置none</p>
<p style="display: inline">p设置inline</p>
<p>p不设置</p>
相对定位（可看作普通流）：
<p>.p1元素无论是否移动，都会占据其原来位置</p>
<p class="p1">相对定位</p>
<style>
.p1{
/*relative：采用相对定位 — 设置水平、垂直位置(可以为负数)，就会相对于原来位置移动*/
position: relative;
left: 20px; /*水平位置：left、right*/
top: 20px; /*垂直位置：top、bottom*/
}
</style>
绝对定位：
绝对定位使元素的位置与文档流无关，因此不占据空间。
<p class="p1">采用绝对定位</p>
<span>绝对定位不占位置</span>
<style>
.p1 {
position: absolute;
/*绝对定位的位置是相对于最近的已定位祖先元素；而对于其他元素，就像不存在一样*/
left: 100px;
top: 100px;
}
</style>
浮动：
<p>test</p>
<style>
p{
/*所有元素都可以浮动*/
/*假如在一行之上不足以容纳浮动元素，那么这个元素会继续占据下一行，直到能够容纳。*/
float: right; /*向右浮动；默认是none(不浮动)，而不是left*/
/*使用JS操纵：object.style.cssFloat="right"*/
}
</style>
浮动不同于定位，对于浮动，就理解为如同在水中漂浮的元素：
<p>test</p>
<p>test</p>
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
<style>
p{
float: left;
display: inline;
background-color: purple;
width: 30px;
}
</style>
举例 —— 创建水平菜单：
<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
</ul>
<style>
ul{
/*默认情况ul有margin-top、margin-bottom、padding-left(好像是来自user agent stylesheet)*/
padding:;
margin:;
list-style-type: none;
}
li{
/*看来li也是块*/
display: inline;
}
a{
float: left;
width: 7em;
text-decoration: none;
color: white;
background-color: purple;
padding: 0.2em 0.6em;
}
a:hover{
background-color: #ff3300;
}
</style>
启用响应式：确保适当的屏幕缩放和绘制，需要添加viewport元信息：
<!-- content包含可选的属性：-->
<!-- width：控制设备屏幕宽度。initial-scale：确保网页加载时,1:1比例呈现,不会有缩放。
user-scalable：是否禁用用户的缩放操作。一般与maximum-scale=1.0一起使用 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no">
CSS深入的更多相关文章
- Matplotlib数据可视化（3）：文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
- CSS的未来
仅供参考 前言 完成<CSS核心技术与实战>这本书,已有一个多月了,而这篇文章原本是打算写在那本书里面的,但本章讲解的内容,毕竟属于CSS未来的范畴,而这一切都还不能够确定下来,所以这一章 ...
- 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧
记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...
- 前端css兼容性与易混淆的点
一.常用的骨灰级清除浮动 .clearfix:after { content: "."; display: block; height:; clear: both; visibil ...
- 理解CSS外边距margin
前面的话 margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有 ...
- 理解CSS视觉格式化
前面的话 CSS视觉格式化这个词可能比较陌生,但说起盒模型可能就恍然大悟了.实际上,盒模型只是CSS视觉格式化的一部分.视觉格式化分为块级和行内两种处理方式.理解视觉格式化,可以确定得到的效果是应 ...
- 谈谈一些有趣的CSS题目（十二）-- 你该知道的字体 font-family
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- ASP.NET MVC with Entity Framework and CSS一书翻译系列文章之第二章：利用模型类创建视图、控制器和数据库
在这一章中,我们将直接进入项目,并且为产品和分类添加一些基本的模型类.我们将在Entity Framework的代码优先模式下,利用这些模型类创建一个数据库.我们还将学习如何在代码中创建数据库上下文类 ...
- 谈谈一些有趣的CSS题目（十一）-- reset.css 知多少？
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- 梅须逊雪三分白，雪却输梅一段香——CSS动画与JavaScript动画
CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...
随机推荐
- SEO三种职位类型：编辑型SEO、技术型SEO、营销型SEO详解
SEO三种职位类型:编辑型SEO.技术型SEO.营销型SEO详解 网站SEO优化作为营销端的服务之一,这些年也呈现出日新月异的格局.一改过去游兵散将式的小作坊生产模式,不断有力量强大的公司团体加入到这 ...
- [转载]Oracle PL/SQL之LOOP循环控制语句
在PL/SQL中可以使用LOOP语句对数据进行循环处理,利用该语句可以循环执行指定的语句序列.常用的LOOP循环语句包含3种形式:基本的LOOP.WHILE...LOOP和FOR...LOOP. LO ...
- <转>jmeter（六）元件的作用域与执行顺序
本博客转载自:http://www.cnblogs.com/imyalost/category/846346.html 个人感觉不错,对jmeter讲解非常详细,担心以后找不到了,所以转发出来,留着慢 ...
- sparkStrming 实时插入 mysql 今天使用echart 实现了简单数据展示 很low 但学习必须加深
- Web前端开发(基础学习+坑）
0.基本说明 0.内容为课堂所学基本知识,加自己踩过的坑 1.web基本框架:html+css+JavaScript,html为网页骨架,css为网页美化,JavaScript负责页面动态交互,脚本等 ...
- getopt_long_only
st_i2c_parser.c中用到,遂学习一下: 参考:https://blog.csdn.net/pengrui18/article/details/8078813 https://blog.cs ...
- 合并ts到mp4
这个比较好用. copy /b d:\xxx\download_ts\* d:\xxx\download_ts\new.mp4 用python ffmpeg也可以,不过我合出来有卡顿或者掉声问题, ...
- 06：vuejs项目实战
1.1 项目说明 1.技术架构 vue.js, 模块化,工程化, 移动端 2.目录部署 Css:所有样式文件 Data:所有异步接口 Img:所有图片文件 Js:所有js文件(2.0) index.h ...
- python简说（二）list
一.list # 1.list 列表 数组a = ['A', 'B', 'C', 'D']# 0 1 2# 2.空list# a = []# a = list()# 3.下标 角标 索引# print ...
- shell 变量相关的命令
变量="变量" readonly 变量名="变量" 表示设置该变量为只读变量 ,这个变量不能别改变 echo $变量名 set 显示本地所有的变量 unse ...