发表于： 2019-05-16 21:06:54
1 722
今天完成的事件
用浮动模型做九宫格
遇到问题 2边边框连在一起，问题解决忘记写 margin 分割外边框。
浮动模型
块状元素是单独占一行，任何元素在默认情况下是不能浮动但是在css可以定义浮动代码如下
div{
width:200px;
height:200px;
border:2px red solid;
float:left;
}
<div id="div1"></div>
<div id="div2"></div>
什么是层模型
如何让html元素在网页中精确定位，就像图像软件PhotoShop中的图层一样可以对每个图层能够精确定位操作。CSS定义了一组定位（positioning）属性来支持层布局模型。
层模型有三种形式：
1、绝对定位(position: absolute)
2、相对定位(position: relative)
3、固定定位(position: fixed)
position:absolute;（绝对定位）
语法如下
div{
width:200px;
height:200px;
border:2px red solid;
position:absolute;
left:100px;
top:50px;
}
<div id="div1"></div>
不太理解绝对定位是什么。
绝对定位好像就是定位置定死了，不管有多少个块状元素最后显示的都是只有一个块状元素在页面上。
如图
相对定位
代码如下
Position:relative;
#div1{
width:200px;
height:200px;
border:2px red solid;
position:relative;
left:100px;
top:50px;
}
<div id="div1"></div>
相对定位不会想绝对定位那样把位置定死，它是可以显示出来好几块状元素 并且是一起进行位置移位。而由于是块状元素在默认网页上面是从上到下进行排列出来的。
层模型 固定定位
Position:fixed;
#div1{
width:200px;
height:200px;
border:2px red solid;
position:fixed;
left:100px;
top:50px;
}
<p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
....
固定位置和绝对定位很像 块状元素只能就有一个位置可以在页面上随便定位移动如图。而且它不受文本内容影响和随着浏览器滚动而发生变化就象网页经常遇到的小广告弹窗。
通过固定定位来实现9宫格
什么是选择器
每一个css标签的声明 由2部分如下
选择器｛
样式
｝
可以看到body选择器的里面的定义是 字体大小为12px颜色是红色然后右边显示的就是在<body>标签里面所有内容包含p h1 vid定标签是要在body 那么显示的文字都是定义样式里面的规定。
类选择器
语法
.类选器名称{css样式代码;}
.类选器名称｛css样式｝
在创建类名前面一定要加英文句号. 其中类选器名称是是可以随便起名但不能是中文。
如图所示
可以看到起的类名fontcolor里面定义样式 为红色 在soan标签插入创建类名就会出现一段红色字体。
ID选择器
Id选择器和类名选择器类似，但标签设置不一样id = “id名称”类名选择器calss=”类名称”
Id前面是#号如代码
#ID名称｛ 样式 ｝
如图
和类名选择器差不多用法。
类和ID选择器的用法不同
ID选择器只能在文档中使用一次，而类名选择器在文档中可以多次一起使用
代码如下
可以看到类名选择器 2个可以起多次使用而定义的样式在文本内容中都显示出来了， ID选器里面的定义只能给一个文本使用2个一起使用就不会显示出效果来了。
子选择器
有一个比较有用的子选择器，即大于符号>用于选择指定标签元素的第一代子元素。代码如下
.food>li{border:1px solid red;}
这行代码会使calls名为food下的元素li加入红色实线边框
如图所示
这个就相当于把标签li 里面的内容全部画一个边框。
包含（后代）选择器：
包含选择就是和子选择器把大括号换成空格这样就表示 他的直接后代都会有实体线框如图
通用选择器
*{ 样式}
所以的标签里面的文本都会被*里面的样式所负责。
今天理解了内联元素何块状元素的应用，用它如何完成九宫格，知道如何应用类名选择器，每个类名选择器在标签中进行声明都可以应用类名选择器里面的样式 属性 或者值而且是可以独立一给存在。
返回列表
评论