css系列(精通 精通)
哈哈哈。
贵哥的编程之路(热爱分享)
IT讲师(csdn研修院 网易云课堂 51cto学堂 php中文网),努力进步中。我想看看我的巅峰在哪里。
展开
-
2种清除浮动方式(超详解)
清除浮动方式一:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css">原创 2020-10-31 14:07:25 · 1048 阅读 · 8 评论 -
float现象(是什么,脱标,排序,贴靠,字围,高度问题)
float特点:1:浮动的元素能让行内元素设置宽高.2:记住,浮动的元素能使用内外边距.3:浮动中不区分行内/块级/行内块级元素的.都可以设置宽高.4:浮动元素是一种水平排版的东西.5:浮动跟行内块级元素很像.6:float只能水平排版.缺点:1:浮动中没有居中对齐,没有.只有左对齐 右对齐.2:但是不能使用margin: 0 auto;使用这样无效.什么是水平排版?行内元素/行内块级元素什么是垂直排版?块级元素原创 2020-10-31 09:37:23 · 3512 阅读 · 13 评论 -
line-height最详解
line-height注意点:行高和盒子高不是同一个概念行高指的是每行内容的高度盒子高指的是元素的高度怎么办?第一步:先把行高设置成20px第二步;再设置自身padding的top与bottom为20px就行了.这样就和行高80px一样。还原字体与字号:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>54-清空默认边原创 2020-10-31 02:52:46 · 3057 阅读 · 1 评论 -
css3盒子模型最详解
box-sizing<html lang="en"><head> <meta charset="UTF-8"> <title>51-盒子box-sizing属性</title> <style> .content{ width: 300px; height: 300px; background-color: red;原创 2020-10-31 01:19:45 · 1812 阅读 · 3 评论 -
CSS盒子模型最详解
1:什么是盒子模型?最重要的一点就是水平方向外边距是会叠加的哈内容+内边距+边框+外边距==盒子模型;注意一下:外边距是没有背景颜色的哈.设置不了的哈.举例子:结论1.在HTML中所有的标签都可以设置宽度/高度 == 指定可以存放内容的区域内边距 == 填充物边框 == 手机盒子自己外边距 == 盒子和盒子之间的间隙代码:<!DOCTYPE html><html lang="en"><head> <meta charset原创 2020-10-31 00:55:00 · 1149 阅读 · 3 评论 -
CSS border详解+padding详解+margin详解
border篇:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css">原创 2020-10-30 10:43:19 · 1255 阅读 · 3 评论 -
重学---css背景与精灵图
background-color:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> *{原创 2020-10-30 09:50:33 · 790 阅读 · 4 评论 -
css显示模式
来来来,实现一个简单的布局.(div容器级与span文本级)的区别<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="te原创 2020-10-30 03:18:53 · 855 阅读 · 1 评论 -
css三大特性继承性 层叠性 优先级 !important 权重
继承性:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>24-CSS三大特性之继承性</title> <style> div{ color: red; text-decoration: none; font-size: 3原创 2020-10-30 01:18:54 · 1140 阅读 · 1 评论 -
css3选择器高级部分
序选择器;<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> *{padding: 0px原创 2020-10-30 00:51:42 · 1051 阅读 · 0 评论 -
五千字长文-css3选择器基础最详解(讲述其核心特点)(下次更新的是选择器高级)
标签选择器:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>08-标签选择器</title> <style> p{ color: red; } h1{ color: blue; } <原创 2020-10-29 14:58:58 · 923 阅读 · 10 评论 -
css的radial-gradient大详解
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>130-径向渐变</title> <style> *{ margin: 0; padding: 0; } div{ width: 400px;原创 2020-09-23 19:55:45 · 1520 阅读 · 1 评论 -
css的linear-gradient注意点
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>127-线性渐变</title> <style> *{ margin: 0; padding: 0; } .main{ width: 400px原创 2020-09-23 19:51:16 · 904 阅读 · 1 评论 -
css的linear-gradient
<!DOCTYPE html><html><head> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } div{ width: 300px; height: 200px;原创 2020-09-23 19:46:48 · 879 阅读 · 0 评论 -
css中border-radius
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> *{ marg原创 2020-09-23 19:41:06 · 792 阅读 · 1 评论 -
css的border-radius注意点
<!DOCTYPE html><html><head> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .one { width: 200px; height: 200px; border原创 2020-09-23 19:32:26 · 850 阅读 · 0 评论 -
border-radius
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>118-边框圆角</title> <style> *{ margin: 0; padding: 0; } .father{ width: 200原创 2020-09-22 23:13:41 · 739 阅读 · 0 评论 -
background-clip默认从border开始的哈
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>114-背景绘制区域属性</title> <style> *{ margin: 0; padding: 0; } ul li{ list-sty原创 2020-09-22 23:06:42 · 742 阅读 · 1 评论 -
background-origin默认从padding-box开始的哈
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>113-背景图片定位区域属性</title> <style> *{ margin: 0; padding: 0; } ul li{ list-s原创 2020-09-22 23:04:55 · 1066 阅读 · 0 评论 -
background-size之详解
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>112-背景尺寸属性</title> <style> *{ margin: 0; padding: 0; } ul{ width: 800px;原创 2020-09-22 23:01:21 · 1086 阅读 · 0 评论 -
flex:1的各种算法看CSS精通精通那里面有
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>131-伸缩布局</title> <style> *{ margin: 0; padding: 0; } ul{ list-style: non原创 2020-09-22 22:42:48 · 688 阅读 · 0 评论 -
flex-basis
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>131-伸缩布局</title></head><style> *{ margin: 0; padding: 0; } ul{ list-style: none; wid原创 2020-09-22 22:41:37 · 843 阅读 · 0 评论 -
flex-grow flex-shrink注意点
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>131-伸缩布局</title> <style> *{ margin: 0; padding: 0; } ul{ list-style: non原创 2020-09-22 22:36:23 · 762 阅读 · 0 评论 -
3D怎么写才能显示出效果呢。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> *{padding: 0;margin:原创 2020-09-20 23:21:49 · 836 阅读 · 0 评论 -
flex-shrink计算公式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> *{ marg原创 2020-09-18 19:53:00 · 992 阅读 · 0 评论 -
animation详解串写
<!DOCTYPE html><html><head> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } div { width: 100px; height: 50px; backgrou原创 2020-09-18 19:48:08 · 1150 阅读 · 0 评论 -
animation属性
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> *{padding: 0;margin:原创 2020-09-18 19:46:43 · 732 阅读 · 0 评论 -
animation属性
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>101-动画模块-其它属性上</title> <style> *{ margin: 0; padding: 0; } div { width:原创 2020-09-18 19:32:04 · 692 阅读 · 0 评论 -
animation怎么执行的。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> *{ margi原创 2020-09-18 16:40:10 · 770 阅读 · 0 评论 -
perspective设置在哪里呢详解
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>95-2D转换模块-旋转轴向</title> <style> *{ margin: 0; padding: 0; } ul{ width: 80原创 2020-09-18 16:33:41 · 1185 阅读 · 0 评论 -
transform-origin
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> *{ marg原创 2020-09-18 16:21:09 · 830 阅读 · 0 评论 -
transform集合
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> *{padding: 0px;margi原创 2020-09-18 16:13:05 · 748 阅读 · 0 评论 -
transtion
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> *{ marg原创 2020-09-17 21:56:57 · 916 阅读 · 1 评论 -
transtion详解
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> *{padding: 0px;margi原创 2020-09-17 21:51:02 · 3044 阅读 · 1 评论 -
transtion属性
<!DOCTYPE html><html><head> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } div { width: 100px; height: 50px;原创 2020-09-17 19:14:41 · 964 阅读 · 0 评论 -
a:伪类
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> *原创 2020-09-17 19:08:29 · 803 阅读 · 0 评论 -
a伪类
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> a:原创 2020-09-17 19:04:51 · 894 阅读 · 0 评论 -
order排序
<!DOCTYPE html><html><head> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } ul{ list-style: none; width: 600px;原创 2020-09-17 15:28:28 · 2417 阅读 · 0 评论 -
flex-grow计算公式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> *原创 2020-09-17 15:28:15 · 996 阅读 · 0 评论 -
flex-wrap align-content详解
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> *{原创 2020-09-17 15:28:01 · 1025 阅读 · 0 评论