手记

慕女神css精华笔记

1.字体样式:

font-family:"字体样式";
font-size:"字体大小";
color:字体颜色;
font-weight:bold; 粗体显示
font-style:italic 斜体
text-decoration:"underline"; 显示下划线效果
text-decoration:"line-through"; 类似于淘宝打折的删除线
text-indent:2em; 文字段落的第一行空两格
line-height: 1.5em;设置行高
letter——spacing 字母与字母之间的间隔
word-spacing 英语单词之间的间隔
text-align 块状元素居中显示

2. 元素分类
块状元素和内联元素,内联块状元素
块状元素和内联元素的最大区别就是 块状元素必须独自占一行
a.常用的块状元素:
<div>,<p>,<h1>,<ol>,<ul>,<dl>(自定义列表),<table>,<address>,<blockquote>,<form>
其特点是 :
1.每个元素都独占一行
2.元素的高度,宽度,行高,以及顶和底边距离都可以设置

  1. 元素宽度在不设置是和父容器一个高度

b.常用的内联元素
<a>,<span>,<br>,<i>(页面的所有文字以斜体效果显示),<em>,<strong>,<lable>,<q>,<var>,<cite>,<code>
其 特点:

  1. 和其他元素都在一行上
  2. 元素的高度,宽度,顶部和底部都不可进行设置
  3. 元素的宽度就是他的问题和图片的宽度不可以改变
    常用的内联块状元素有
    <img>,<input>

将内联元素转换为块状元素的 方法 display:block;
块状元素转换成内联元素的方法: display: inline;
内联块状元素,两种元素一起使用 : display:inline-block;

盒子模型:
border : 2px solid red; 设置边框粗细为2px的样式为实心,颜色为红色
他等于
border-width:2px;
border-style:solid; dashed 是虚线 dotted 点线 solid 实线
css样式表中只允许设置一个方向样式
因此一个元素实际宽度(盒子的宽度)=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。

边界设置 用 margin
边框用 border
填充用padding

**css  布局** 
三种模型 
  1. 流动模型(Flow);
  2.浮动模型(Float);
  3.层模型(Layer);

1.流动布局模型具有2个比较典型的特征:

第一点,块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%。实际上,块状元素都会以行的形式占据位置。如右侧代码编辑器中三个块状元素标签(div,h1,p)宽度显示为100%。

  1. float-left; 向左边浮动

3.层模型有三种形式:

1、绝对定位(position: absolute)
如果想为元素设置层模型中的绝对定位,需要设置position:absolute(表示绝对定位),这条语句的作用将元素从文档流中拖出来,然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块,则相对于body元素,即相对于浏览器窗口。
div{
width:200px;
height:200px;
border:2px red solid;
position:absolute;
left:100px;
top:50px;
}
<div id="div1"></div>
2、相对定位(position: relative)
如果想为元素设置层模型中的相对定位,需要设置position:relative(表示相对定位),它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来),然后相对于以前的位置移动,移动的方向和幅度由left、right、top、bottom属性确定,偏移前的位置保留不动。

如下代码实现相对于以前位置向下移动50px,向右移动100px;

div1{
width:200px;
height:200px;
border:2px red solid;
position:relative;
left:100px;
top:50px;

}

<div id="div1"></div>

3、固定定位(position: fixed)
fixed:表示固定定位,与absolute定位类型类似,但它的相对移动的坐标是视图(屏幕内的网页窗口)本身。由于视图本身是固定的,它不会随浏览器窗口的滚动条滚动而变化,除非你在屏幕中移动浏览器窗口的屏幕位置,或改变浏览器窗口的显示大小,因此固定定位的元素会始终位于浏览器窗口内视图的某个位置,不会受文档流动影响,这与background-attachment:fixed?属性功能相同。以下代码可以实现相对于浏览器视图向右移动100px,向下移动50px。并且拖动滚动条时位置固定不变。

div1{
width:200px;
height:200px;
border:2px red solid;
position:fixed;
left:100px;
top:50px;

}

99人推荐
随时随地看视频
慕课网APP

热门评论

有点基础,没看到想看到的

不全呀

不错

查看全部评论