初学HTML,css

初学HTML和css的一些常用的知识

1. 背景渲染从border开始
2. 边框默认大小3px默认颜色为字体颜色没有默认样式
   background-origin 背景图片的起始位置取值:
   border-box:默认 盒子左上角
   padding-box:padding左上角
   content-box content左上角
3. p元素不能包含的元素
   div、p、h1-h6、语义化标签
4. flex:适用父子级关系
   项目尺寸超出容器尺寸，项目不会溢出，有默认缩小比例：1。
5. 行盒和行块盒水平排列时有一个间隙是因为代码之间的换行或者空格
   解决方案：在父元素中font-size：0px然后在文本标签还原字体大小
6. 行内元素
   1、可替换行内元素：元素的显示内容由其属性决定，比如img video audio 可以设置宽高
   2、不可替换：显示内容由元素内容决定 不能设置宽高
   行盒不适合嵌套
   行盒必须是常规流，浮动和定位会强制变成块盒
7. Block Formatting Context （BFC）
   一块独立的渲染区域，规定了再该区域中，常规流块盒的布局
   不同的bfc区域，他们进行渲染时互不干扰
   具体规则：
   1、隔绝了他内部与外部的联系，内部的渲染不会影响到外部
   2、他的自动高度需要计算浮动元素
   3、不会和他的子元素进行外边距合并
   （margin-top时就不会和子元素一起往下跑）
   创建BFC：根元素、浮动和绝对定位、overflow不是visible的块盒，最常见就是overflow：hidden；
   添加overflow：hidden时是让子元素处于BFC环境
   也就是说想让某个元素处于BFC环境应该给父元素添加overflow：hidden；
8. 隐藏盒子
   display:none 盒子消失，盒子没有了
   visibility：hidden 隐藏盒子 不可见，但是还在
   不能被选中
   opacity:0 标签透明 有继承性 可以被选中
   rgba(?,?,?,1-0)最后一位为透明度 单独颜色透明
9. 表单

 <label for="username">用户名</label>
<input type="text" id="username">
使用<label for="id">*****</label>可以点击****使改该id名的标签获得焦点
 特殊属性

readonly只读属性，加了就不能给内容。但是可以提交服务器。只能用于输入框
disabled禁用属性，数据不可提交服务器，可以用于所有表单元素
multiple时显示所有选项并且可以多选，没有是只显示第一个选项并且是能选一个（与select一起使用）
键值对
键名name
值value
如果是输入框,只用添加name
如果是选择框,就要给选择框添加值.(value)

placeholder 只是提示信息,不能提交.
改变样式input::-webkit-input-placeholder{}

select可以添加optgroup为子项,表示分组提示

<optgroup label="">

<input required>为必填项,没填就不能提交
<input maxlength="X">输入框最多可以输入X个字符type="number"时,不起作用

重置按钮,页面恢复到初始状态

<input type="reset">

checked 可以给单选框和多选框添加一个默认选中
selected 可以给下拉框添加一个默认显示项

transition 过渡
适用尺寸,颜色,透明度.不支持display:none
transition: all linear 1000ms
时间,样式,速度
transition-timing-function
ease默认 匀速
ease-in 由慢到快
ease-out 又快到慢
ease-in-out 由慢到快再到快
linear 线性
transition-delay 延迟动画

transform 变形 不影响布局 会覆盖标签
scale 缩放 1默认,不变 >1变大 <1变小
skew 倾斜角度 90deg 正值逆时针 负值顺时针
rotate 旋转, 正值顺时针,负值逆时针.可以以xyz三根轴线旋转rotateX(z,y)默认是Z
transform-origin:0 0; 原点的设置
值可以是方位top等,也可以给值,右下方为正 默认为中心点
translate 偏移量 (水平,垂直)正值往右下,负/值为左/上

animation 动画
animation:名字 时间 速度 次数
@keyframes 名字{}

列表样式默认在次盒子中(padding区域)
list-style-position属性可以改变现实位置.默认是outside
inside 显示在content区域

给网页添加字体
定义
@font-face{
font-family: ‘名字’;
src: url(“路径”);
}
应用
font-family: 名字;