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的动 ...
随机推荐
- C++中set用法详解
1.关于set C++ STL 之所以得到广泛的赞誉,也被很多人使用,不只是提供了像vector, string, list等方便的容器,更重要的是STL封装了许多复杂的数据结构算法和大量常用数据结构 ...
- bzoj2049 [Sdoi2008]Cave 洞穴勘测 link cut tree入门
link cut tree入门题 首先说明本人只会写自底向上的数组版(都说了不写指针.不写自顶向下QAQ……) 突然发现link cut tree不难写... 说一下各个函数作用: bool isro ...
- Wi-Fi Mesh网络技术
Wi-Fi在很早的时候就引入了mesh技术,并且最近得到了越来越多的关注.谷歌.Eero.Linksys.Netgear以及几乎所有以家庭和小型办公室为目标的网络品牌都提供了mesh网格系统.但是也有 ...
- react复习总结（1）--react组件开发基础
这次是年后第一次发文章,也有很长一段时间没有写文章了.准备继续写.总结是必须的. 最近一直在业余时间学习和复习前端相关知识点,在一个公司呆久了,使用的技术不更新,未来真的没有什么前景,特别是我们这种以 ...
- URL的解析，C语言实现
源: URL的解析,C语言实现 c语言实现urlencode和decode
- Python Selenium element is not reachable by keyboard
碰到这个问题,没法解决, 最后这么搞的 pcAction.move_by_offset(571, 534).click().perform() #激活输入框 driver.switch_to.acti ...
- JavaScript实现表单验证_02
注册3次错误,最终的结果: 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...
- 一、初始PS软件
PS的介绍 Adope Photoshop,简称“PS”,是由Adope Systems开发和发行的图像处理软件. Photoshop主要处理以像素所构成的数字图像,使用其众多的编修与绘图工具,可以 ...
- oracle12c的日志查看
查看GI日志:切换到grid用户 查看DB日志:切换到oracle的目录下 执行[oracle@swnode1 ~]$ adrci [oracle@swnode1 ~]$ adrci ADRCI: R ...
- 20145308 《网络对抗》Web安全基础实践 学习总结
20145308 <网络对抗> Web安全基础实践 学习总结 实验内容 本实践的目标理解常用网络攻击技术的基本原理.Webgoat实践下相关实验. 基础问题回答 (1)SQL注入攻击原理, ...