weixin_43343144的博客

参考文档：https://www.cnblogs.com/ljwk/p/7136384.html?utm_source=itdadao&utm_medium=referral

<header>顶部标签</header><nav>导航栏标签</nav><section>中心标签</section><article>文章标签</article><footer>底部标签</footer><div class="container">...

CSS3之grid栅格布局(行列同时控制)的布局效果：<div class="container"> <div class="first">第一区域</div> <div>第二区域</div> <div class="three">第三区域</div> <div ...

1、CSS3之新特性grid栅格布局：【行row和列column】都自己控制,完全基于CSS控制（未来的主流趋势，最新的浏览器才兼容）2、float模拟栅格布局：核心控制【列】的一维布局【使用整体：目前市面上最流行的模拟栅格布局,大部分框架都是基于此】2、flex布局：核心是控制【行的内部布局】形成的一维布局【适合局部：目前市面上最流行的局部布局，大部分框架都开始支持】...

参考链接：https://blog.youkuaiyun.com/sugaryott/article/details/54177366

满足flex布局的三个必要条件：第一个条件：必须是html父子结构！父元素称之为容器，子元素称之为flex项目(item)！第二个条件：父元素的display属性设置为flex【块级flex项目(子元素为块级元素)布局】或inline-flex【行级flex项目(子元素为行级元素)布局】第三个条件：flex轴向（flex项目的排列以轴向为基准---默认情况下flex-direction...

CSS中的块级元素与行级元素最近初学CSS时对块级元素与行级元素有时会产生混淆，写篇博客记录一下自己对其的理解。先从概念上来看：块级元素特点：1.每个块级元素都是独自占一行，其后的元素也只能另起一行，并不能两个元素共用一行。　　　2.元素的高度、宽度、行高和顶底边距都是可以设置的。　　　　　3.元素的宽度如果不设置的话，默认为父元素的宽度。默认情况下：常见的块级元素：&...

浮动流的原理是：浮动的目的可以让块级元素左右漂浮【打破块级元素独占一行的特性】浮动流float只有两个属性，一个left左浮动，一个right右浮动。浮动的原则就是：只能在块元素当前行的左右浮动，不可能上下浮动，这也是和定位最大的区别【定位没有任何限制，可以上下左右到处跑】为什么要清除浮动流：浮动流就相当于一个有弹性的盒子，当盒子拉到最大的时候，如果没有什么东西来撑住盒子，一旦释...

相对定位：相对定位：相对于自己原来的位置！绝对定位：绝对定位：相对于最近的非static定位(有定位的)祖先元素* { // 默认值：无任何定位 position: static; // 相对定位：相对于自己原来的位置！ position: relative; // 绝对定位：相对于最近的非static定位(有定位的)祖先元素 pos...

<form action=""> <textarea> </textarea> </form>textarea { width: 500px; height: 500px; // 设置这个属性即可 resize: none;}...

参考文档：http://www.divcss5.com/shili/s547.shtml<div class="top"> <div class="center"> <div class="left"></div> <div class="right"></div...

CSS样式分类参考(分类最全面)：https://www.w3cschool.cn/cssref/3ps212do.html特别声明：CSS3样式也存在继承，但是只有和文字有关的样式才会继承【如：字体的大小、颜色、样式......】1、字体常见样式总结：*{ // 字体类型 font-family: Arial; // 字体大小 font-si...

first-child官方解释：表示在一组兄弟元素中的第一个元素（最初定义时，所选元素必须有一个parent。而从选择器 Level 4 开始，parent不再是必须的。）last-child官方解释：表示在一组兄弟元素中的最后一个元素（最初定义时，所选元素必须有一个parent。而从选择器 Level 4 开始，parent不再是必须的。）务必注意：你的这组兄弟元素节点必须在同一个...

参考这里：https://www.w3cplus.com/css/px-to-em

/* Keyword values */writing-mode: horizontal-tb;writing-mode: vertical-rl;writing-mode: vertical-lr;/* Global values */writing-mode: inherit;writing-mode: initial;writing-mode: unset;