前端css笔记（pink老师）

原创

于 2024-04-11 13:11:44 发布 · 1k 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #css #笔记

本文详细讲解了CSS的基础书写顺序、如何实现自适应屏幕、元素的显示模式、表单元素的使用、定位技巧、CSS3的特性如box-sizing、transition和transform，以及H5标签的兼容性和一些CSS3特殊属性的用法。

css

css书写顺序

自适应屏幕

html {

width: 100%;

height: 100%;

display: table;

}

body {

display: table-cell;

}

用了这个方法以后，如果希望页面内的盒子也适应屏幕大小，则使用以下方法，会根据父亲的宽高计算出该盒子的宽高

width:xx%;

height:xx%;

margin和padding也可以这样用，padding可以撑开盒子，某些时候这样使用很方便。

padding:100%;
兼容性适配浏览器私有前缀

兼容老版本，新版本无需添加。
li去除小点,a去除下划线,去除input聚焦时的默认框
```
list-style:none;//li去除小点
```
```
outline:none;//去除input聚焦时的默认框
```
- 元素的显示模式（块级，行内，行内块）
表单域form

点击后可跳转到index.html并传递锚点链接 name=输入内容
```
<form action="index.html">
        用户名<input type="text" name="name">
        <input type="submit" value="登录">
 </form>
```
location对象的search可获得?name=输入内容
定位的注意情况

行内元素:绝对，固定定位→可设置宽高

块级元素:绝对固定定位→无宽高默认内容大小

浮动，绝对，固定定位→不会外边距合并

浮动→压住下面标准流盒子，但不会压住文字，文字围绕浮动元素(盒子设置动画时不用浮动，避免文字挤在一起)；

绝对定位→压住所有内容
display，visiblilty，overflow隐藏元素

display:none不占有位置

visibility:hidden占有位置

overflow:auto需要时候添加滚动条；scroll右边和底部都会出现滚动条；
border,margin,padding的注意情况

border（外部）和padding(内部）会撑大盒子。
```
box-
```