-
1、<!DOCTYPE html>
注释：必须放第一行。
2、查看全部 -
先定义背景墙类
.box{
background:blue;
display: flex;
justify-content: center; /*flex-start; flex-end; flex-between;*/
}
再统一定义每个块大小
.box div {
width: 20px;
height: 20px;
}
分别定义每个块的颜色：
.box1 {
background: red;
}
.box2 {
background: orange;
}
.box3{
background: green;
}
查看全部 -
margin:-100px 0 0 -100px;
使用 这句代码让绝对定位的元素精确居中
1、top: 50%; left:50%;
这句是让.box1的左上角位于父容器中心点
2、margin:-100px 0 0 -100px;
将元素向左移动自身宽度的一半（100px),向上移动自身高度的一半（100px),使元素的中心点与父容器的中心点重合。
查看全部 -
除了框长宽的设置，还需要考虑文字大小，别溢出框外
查看全部 -
定位
绝对定位 position: absolute
相对定位position : relative
固定定位 position: fixed
查看全部 -
块元素
<div><p>(<h1>....<h6>)<ol>\<ul>\<dl>,<table>\<address>\<blockquote>\<form>
内联元素
<a>\<span>\<br>\<i>\<em>\<strong>\<label>\<q>\<var>\<cite>\<code>
内联块元素
<img>\<input>
查看全部 -
固定定位：
position: fixed;
定位原点：
bottom:0
right:0
查看全部 -
没理解任务，定位是什么意思
原点坐标？
查看全部 -
层模型的相对定位，需要先建立关联关系
position: relative;
再进行位移：
left\top\bottom\right
向右移动，要选left
查看全部 -
div1{ float:left;}
div2{float:right;}
查看全部 -
元素的三种布局模型
1、流动模型 flow
2、浮动模型 float
3、层模型 layer
查看全部 -
margin(top,right,bottom, left)
padding(top,right,bottom,left)
border(top,right,bottom,left)
查看全部 -
填充后并未居中
需要使用text-align: ceter; 和line-height: 100px;
#box1 {
width: 100px;
height: 100px;
border: 1px solid red;
padding: 10px;
display: flex;
justify-content: center;
align-items: center;
}
查看全部 -
原来可以缩写，按（左上、右上、右下、左下）顺序
border-radius: 15px 30px 10px 30px;
查看全部 -
设置圆角的命令有点长。不太方便。
border-top-right(left)-radius
border-bottom-left(right)-radius
查看全部 -
这节课为何不讲清楚把哪个属性的值设为none?
display的值设置为none
查看全部 -
元素的高宽行高顶底边距都可设置
查看全部 -
内联块状元素（inline-block）
同时具备内联元素、块状元素的特点，代码 display:inline-block
查看全部 -
内联元素: <span>,<a><label>,<strong>,<em>(行内元素）
div{
display:inline;//将元素设置 为内联元素。
}
内联元素特点：
查看全部 -
常用的块状元素
<div>
<p>
<h1>
<h6>
<ol>
<dl>
<table>
<address>
<blockqueote>
<form>
常用的内联元素
<a> <span><br><i><em><strong><label><q><var><cite><code>
内联块状元素
<img><input>
查看全部 -
设置文字或者图片居中
text-align: center/left/right.
查看全部 -
字母间距： letter-spacing: 50px
单词间距：word-spacing: 20px
查看全部 -
缩进 text-indent
2em: 文字的2倍
查看全部 -
加大号
font-size
加粗
font-weight
查看全部 -
字体样式的缩写:
body{
font: XX XX XXXX font-size与line-height中间要加 "/".
}
查看全部 -
应该还是就近原则：
内联样式>id选择器>类选择器>标签选择器>通配符选择器
查看全部
举报