CSS
关注
分享
扫一扫
qq_39125445
挑战自我，持之以恒
展开
-
CSS中哪些元素可以继承，哪些不可以继承
CSS中可以和不可以继承的属性一、无继承性的属性1、display：规定元素应该生成的框的类型2、文本属性：vertical-align：垂直文本对齐text-decoration：规定添加到文本的装饰text-shadow：文本阴影效果white-space：空白符的处理unicode-bidi：设置文本的方向3、盒子模型的属性：width、height、ma...原创 2019-03-04 22:06:13 · 2243 阅读 · 0 评论 -
使用CSS绘出各类图形
1.合理使用after和before伪类如果伪类是一个有长宽的内容，那么就会无效，也就是伪类内容会在长宽里面，不会在外面，那么就可以设置伪类形状必须采用定位才能解决位置问题，有一重点是content必须要，没有内容的情况下都使用content:""，没有content的情况下，伪类失效。2.使用伪类画出图形 <style> .main { ...原创 2019-05-02 10:09:02 · 550 阅读 · 0 评论 -
CSS基础知识
1.position定位知识position：static，跟随文档流，默认设置值，没有top,right,bottom,left,z-index等内容。position:fixed，脱离文档流，可以设置top....等属性，header这种可以固定在上下左右，所以一些导航栏就是这样设置的，高度不用更改html和body就可以设置为100%；实例：导航栏固定，并且在导航栏下面设置背景图...原创 2019-04-03 16:19:38 · 267 阅读 · 0 评论 -
网页布局
单列布局应用场景：网页中有时候内容不多，单行内容的，最多只用margin居中就行<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initi...原创 2019-03-21 19:29:53 · 405 阅读 · 0 评论 -
CSS专题梳理之（块级行内级）水平垂直居中的多种方式
设置块级元素长宽水平，垂直居中1.使用relative，absolute脱离文档流2.使用绝对定位后，各方向初始化为0，margin为auto就可以执行。块级元素和行内元素水平，垂直居中1.使用flex布局都可以使用2.使用relative,css中transform专门的块级元素水平居中：margin：0 auto；专门的行级元素水平，垂直居中：...原创 2019-03-21 18:31:33 · 1227 阅读 · 0 评论 -
web前端之浏览器兼容问题
1.margin问题每个浏览器的margin值设置的不太一样，所以采用重置margin等2.浏览器浮动问题浏览器如果采用浮动，那么就可以设置长宽，并且右边距离的可以设置，那么设置的长度是过长将会把右边的模块挤到第二排，那么处理方法是将左边的浮动设置为inline3.设置的高度低于浏览器默认高度，那么对这个模块采用overflow:hidden4.ie中event.srcElem...原创 2019-06-11 08:14:22 · 284 阅读 · 0 评论 -
BFC
BFC概念：块级格式上下文，独立的块级渲染区域，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。形成条件：1.浮动元素2.绝对定位元素3.display：inline-block作用：1.包含浮动影响下一行内容。2.不被浮动元素所遮盖3.阻止外边距折叠也就经常遇到margin-top影响到外面的内容，在盒子里面反而没起效...原创 2019-03-09 16:25:28 · 122 阅读 · 0 评论 -
关于border绘制几何图形
先来最简单三角形绘制，我们先来看一个东西 .hy{ width: 40px; height:40px; background-color: cadetblue; border-top: 20px solid red; border-left:20px soli...原创 2019-02-25 22:13:21 · 268 阅读 · 0 评论 -
CSS中选择器种类详解和优先级
CSS三大特性——继承、 优先级和层叠。继承：即子类元素继承父类的样式;优先级：是指不同类别样式的权重比较;层叠：是说当数量相同时，通过层叠(后者覆盖前者)的样式。css选择符分类 首先来看一下css选择符(css选择器)有哪些?1.标签选择器(div)2.id选择器(#ka)3.类选择器(.ka)4.后代选择器（ul li）5.子代选择器（ul>...转载 2019-03-04 22:12:32 · 1208 阅读 · 0 评论 -
flex布局详解
flex布局容器属性采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交...原创 2019-07-26 16:17:32 · 229 阅读 · 0 评论