关于css的一些知识点整理
一、标签的类型:
行内:span、a、b、i、strong、em、 1.共处一行 2.不支持设置宽高
display:block; 转换成块
块:h1-h6 p div ul ol 1.独占一行 2.支持设置宽高
display:inline; 转换为行内
行内块:img 1.共处一行 2.支持设置宽高
display:inline-block; 转换为行内块
二、定位
relative 相对定位,对象不可层叠
1、针对自己定位
2、不脱离文档流
*将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流
absolute 绝对定位。将对象从文档流中拖出,使用left,right,top,bottom等属性相对于其最接近的一个具有定位设置的父对象进行绝对定位。如果不存在这样的父对象,则依据body对象。
1、找具有定位的父级,找不到找body对象
2、脱离文档流
3、元素变块
4、宽度默认变小,小到内容的宽度
fixed 固定定位
1、针对可视区定位
2、脱离文档流
3、可以把元素变成块
4、宽度默认变小,小到内容的宽度
三、margin
margin的bug
1.margin塌陷(只对上下而言) 上下之间的margin - 重叠 不会相加
解决办法: 1.单方向定义 2.用padding(有条件)
2.margin 拖拽父级
解决办法: 1.给父级加border 2.给父级加overflow-hidden (加堵墙) 3.用padding(推荐) 能用padding就用padding!!!
margin 是有好处的:
margin可以写负值; Padding不可以;
1.在没有定义宽高的块内 写Margin可以改变块的大小
2.在定义宽高的块内 写Margin可以改变块的位置
四、浮动
1、浮动的特点:
(1).脱离文档流 (2).可以把元素变成块 (3).顶对齐 (4).它会跟着最高的后面
2、浮动的三要素:
(1)加了浮动就得清浮动!
(2)尽量设置宽度
(3)同级元素浮动,同级所有元素都必须加浮动
3、清除浮动
(1)给浮动元素的父级加 overflow:hidden;
(2)给浮动元素最下边加 clear:both;
(3)给浮动元素父级加 .clearfix:after{display:block; content:''; clear:both;}
.clearfix{zoom:1;}
五、元素变成块:
diplay:block;
float:left/right;
position:absolute/fixed;
六、透明度设置
filter:alpha(opacity:30);
opacity:0.3;
七、一个div层垂直水平居中的代码
position:absolute; top:50%; left:50%; margin-top:-height/2; margin-left:-width/2;
关于css的一些知识点整理的更多相关文章
- css入门知识点整理
css入门知识点整理 不要嘲笑我这个蒟蒻..例子来源:w3school css其实就分为两个东西,一个是选择器,另外一个是声明.声明定义了某个对象的属性的值,这都是html的内容.重点要关注的是选择器 ...
- HTML&&CSS基础知识点整理
HTML&&CSS基础知识点整理 一.WEB标准:一系列标准的集合 1. 结构(Structure):html 语言:XHTML[可扩展超文本标识语言]和XML[可扩展标记语言] 2. ...
- css 的一些知识点的整理
css的一些标签整理 background-attachment: scroll;背景图可滚动 background-attachment: fixed; 固定背景的位置,不随着滚动条移动而移动 ...
- vue前端面试题知识点整理
vue前端面试题知识点整理 1. 说一下Vue的双向绑定数据的原理 vue 实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫 ...
- web前端面试知识点整理
一.HTML5新特性 本地存储 webStorage websocket webworkers新增地理位置等API对css3的支持canvas多媒体标签新增表单元素类型结构标签:header nav ...
- css兼容性问题的整理
css兼容性问题的整理 1.文字本身的大小不兼容.同样是font-size:14px的宋体文字,在不同浏览器下占的空间是不一样的,ie下实际占高16px,下留白3px,ff下实际占高17px,上留白1 ...
- ACM个人零散知识点整理
ACM个人零散知识点整理 杂项: 1.输入输出外挂 //读入优化 int 整数 inline int read(){ int x=0,f=1; char ch=getchar(); while(ch& ...
- Android 零散知识点整理
Android 零散知识点整理 为什么Android的更新试图操作必须在主线程中进行? 这是因为Android系统中的视图组件并不是线程安全的.通常应该让主线程负责创建.显示和更新UI,启动子线程,停 ...
- CSS常见布局问题整理
实现div的水平居中和垂直居中 多元素水平居中 实现栅格化布局 1. 实现div的水平居中和垂直居中 实现效果: 这大概是最经典的一个题目了,所以放在第一个. 方法有好多, 一一列来 主要思路其实就是 ...
随机推荐
- Rocky4.2下安装达梦(DM)6数据库
1.准备操作系统 1.1 系统登录界面 1.2 操作系统版本信息 jdbh:~ # uname -ra Linux jdbh -x86_64 # SMP Fri Dec :: CST x86_64 G ...
- 获取Java系统相关信息
package com.test; import java.util.Properties; import java.util.Map.Entry; import org.junit.Test; pu ...
- shader三种变量类型(uniform,attribute和varying)
uniform变量在vertex和fragment两者之间声明方式完全一样,则它可以在vertex和fragment共享使用.(相当于一个被vertex和fragment shader共享的全局变量) ...
- 使用 JavaScript 实现基本队列、优先队列和循环队列
1.基本队列的实现 基本队列的方法中,包含了 ①向队列(尾部)中添加元素(enqueue).②(从队列头部)删除元素(dequeue).③查看队列头部的元素(front).④查看队列是否为空(isEm ...
- eclipse安装JS插件
在eclipse中有三种Javascript插件可供选择: JSDT JSEclipse Spket Spket插件安装: 手动安装:到http://www.spket.com/download.ht ...
- php array_udiff_uassoc比较数组的键值与值
php array_udiff_uassoc 用于带索引检查计算数组的差集,用回调函数比较数据和索引.本文章通过实例向大家介绍array_udiff_uassoc函数的使用方法.需要的码农可以参考一下 ...
- Node.js 使用 soap 模块请求 WebService 服务接口
项目开发中需要请求webservice服务,前端主要使用node.js 作为运行环境,因此可以使用soap进行请求. 使用SOAP请求webservice服务的流程如下: 1.进入项目目录,安装 so ...
- JS之获取样式
基本代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- JMeter学习-018-JMeter 配置元件之-HTTP信息头管理器-实现 Cookie 登录
之前写过一篇通过[HTTP Cookie管理器]实现登录态操作的文章,使用时需要配置每个键值对(如下图所示),相对来讲配置比较繁琐.其实,我们也可通过在[HTTP信息头管理器]添加 Cookie 信息 ...
- NPOI操作excel之写入数据到excel表
在上一篇<NPOI操作excel之读取excel数据>我们把excel数据写入了datatable中,本篇就讲如何把datatable数据写入excel中. using System; u ...