本帖最后由 小石姐姐 于 2017-11-21 10:07 编辑
HTML
HTML的块标签
块级元素:独占一行,可以修改高度和宽度
<div></div> :默认一个div独占一行 div 块级元素转行内元素添加属性display:inline
行内元素:不独占一行,不可以修改高度和宽度
<span></span> :默认是同一个行
tabale和div布局的区别
div更加灵活,并且解析加载速度快
CSS的概念
*HTML相当于网站的骨架!css对骨架进行美化
*CSS可以在任何网站使用,任何网站都会用CSS美化页面
CSS语法
CSS的基本语法通常包含两个部分:一个是选择器,一个是声明
*选择器{属性:属性值;属性:属性值...}
CSS的引入方式
*行内样式:直接在HTML的元素上使用style属性设置css
<h1 style="color:red;font-size:200px ;">标题</h1>
*页面内样式:在HTML的<head>标签中使用<style>标签设置css
<style>
h1{
color:blue;
font-size: 40px;
}
</style>
*外部样式:单独定一个.css的文件,在HTML中引入CSS文件
<link href="../../css/demo1.css" rel="stylesheet" type="text/css" />
CSS的选择器
元素(标签)选择器:
div{
border:1px solid blue;
width:40px;
height:45px;
}
ID选择器:注意ID前要加#
#d1{
border:2px solid red;
}
类选择器:
.divClass{
border:2px solid yellow;
}
后代选择器
#div span{
}
查找的是所有div中的所有的span元素
子元素选择器
div>span 找这个div中的第一层span元素
并列选择器
选择器,选择器{
}
属性选择器:标签名[属性名="属性值"]{}
<style>
input[type="text"]{
属性
}
</style>
选择器的优先级
ID选择>类选择>标签选择
CSS的浮动:为了让某些标签(块级标签,div,li)横着显示
使用float属性可以完成DIV的浮动.
属性:
left :
right :
none :
inherit :
清除浮动效果：使用clear属性进行清除:
1在浮动的元素后面添加<div style="clear;both"> 不建议使用
2给浮动的元素的父元素添加一个clearfix
属性
left :
right :
both :
none :
inherit :
CSS中的继承问题
在CSS中宽度可以继承,高度不可以继承
注意:浮动以后的元素是不会继承宽度
扩展:
div居中 : (margin 0 auto)div居中
百分比和px的计算 :calc(30% - 2px)函数计算 注意减号附近必须有空格
CSS中的盒子模型
属性:
外边距;margin:盒子与盒子之间的距离
内边距padding :
宽度计算方式:padding-left=padding-right+border-left+border-right+content
css中的定位
position属性定位:
*relative:相对定位 ,是相对于最外面的边框body
*absolute:绝对定位
使用的时候记住:子绝父相
fixed:制作广告的时候使用
使用另外两个属性:left,top
css的伪类
link:visited:hover:active顺序不能乱
|
|
收藏
淘帖
踩
