老样子,先贴练习网址:
菜鸟教程CSS实例:http://www.runoob.com/css/css-examples.html
W3SCHOOL HTML参考手册:http://www.w3school.com.cn/tags/tag_a.asp
一、今天来学习一下盒模型(Box Model)相关的内容吧,新手直觉这里很重要!
练习题:
# 指定元素的总宽度为250像素:width+padding左右+border左右+margi左右=250px
# 其他练习题就不写在这里了,是关于简单设置元素边框、填充、边距等内容的练习。
知识点:
* 边框(border):
border:5px solid red;
border-width、border-style、border-color可设置所有边框,或分别设置4个边框;
上下左右边框可单独设置width、style、color,如border-top-color。
* 轮廓(outline):
位于border之外:color、style、width
* 边距(margin):没有颜色,透明
* 填充(padding):没有颜色,透明
* 关于一次设置4个方向的上右下左顺序问题:
4个值:上右下左
3个值:上、左右、下
2个值:上下、左右
1个值:4个方向一样
二、Display与Visibility
隐藏:
display:none; 隐藏的元素不占用空间
visibility:hidden; 隐藏的元素仍然占用空间,不显示出来
visibility:collaspe; 隐藏表格中的一行/列
改变块元素、内联元素
块元素block:占用了全部宽度,在前后都是换行符,如<div> <p> <h1> display:block; 改变为块元素
内联元素inline:只需要必要的宽度,不强制换行,如<span> <a> display:inline; 改变为块元素
三、定位
练习题:
# 元素相对浏览器窗口的位置:position:fixed;
# 元素的相对定位 position:relative;
# 元素的绝对定位 position:absolute;
# 重叠的元素 z-index=-1;
# 设置元素的形状 clip:rect(top,right,bottom,left);
# 如何使用滚动条来显示元素内溢出的内容 overflow:scroll;
# 如何设置浏览器自动溢出处理 overflow:auto;
# 使用像素值设置图像的顶部
# 使用像素值设置图像的底部
# 使用像素值设置图像的左边
# 使用像素值设置图像的右边
# 更改光标 cursor:pointer;
知识点:
* position 属性指定了元素的定位类型。属性值如下:
static:默认,正常位置
fixed::固定,相对于浏览器窗口固定,窗口滚动时不会动
relative:相对定位,相对正常元素位置的移动
absolute:绝对定位,
sticky:粘性定位,结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位,表现为在跨越特定阈值前为相对定位,之后为固定定位。适用于一些特殊场景(如导航栏固定)。
这个特定阈值指的是 top, right, bottom 或 left 之一,so,需指定 top, right, bottom 或 left 四个阈值其中之一,才可使粘性定位生效。否则其行为与相对定位相同。
(一开始没示例看懂,原来是CSS3浏览器兼容性的问题,根本没看到效果!效果看下面例子吧)
解释参考:https://www.cnblogs.com/coco1s/p/6402723.html
四、浮动
练习题:
# 简单的使用float属性
# 为图像添加边框和边距并浮动到段落的左侧
# 标题和图片向右侧浮动
# 让段落的第一个字母浮动到左侧
# 使用float属性创建一个图片廊
# 开启float - clear属性
# 创建一个水平菜单
知识点:
* float:none(默认无浮动)、left、right
* clear:none(默认允许浮动)、left、right、both 指定不允许元素周围有浮动元素。
# 创建一个没有表格的网页
目标图:
练后感:emmm....一言难尽,做成了下图的狗shi样子。一眼看上去感觉很容易,结果很多地方都不知道该怎么搞。
知识点:
* box-sizing:假如您需要并排放置两个带边框的框,可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框,并把边框和内边距放入框中。
→
* 如果外部有一个div容器,其内部div容器设置了float样式,则外部的容器div因为内部没有clear,导致不能撑开。
解决方法:
#middle::after {
content: "";
clear: both;
display: table;
}
加了以后footer立刻就下去了!↓↓↓
清除浮动内层div浮动的3种方式 https://www.cnblogs.com/wdlhao/p/5037678.html
* display
display:block ↓
display:inline-block ↘
display的值很多,目前先了解这三个。
CSS display 属性 http://www.w3school.com.cn/cssref/pr_class_display.asp
五、对齐
知识点:
* 元素居中(水平居中)
margin:auto; 如div
text-align:center; 文本
* 元素居中(垂直居中)
padding、line-height、position+transform
* position绝对定位(左右对齐)
position:absolute;
right:0;
注释:绝对定位元素会被从正常流中删除,并且能够交叠元素。
提示: 当使用 position 来对齐元素时, 通常 <body> 元素会设置 margin 和 padding 。 这样可以避免在不同的浏览器中出现可见的差异。
* float对齐(左右对齐)
float:right;
又学了一部分,继续努力!