-
1、给子元素设置flex属性,可以设置子元素相对于父元素的占比。
2、flex属性的值只能是正整数,表示占比多少。
3、给子元素设置了flex之后,其宽度属性会失效。
查看全部 -
但当给 font-size 设置单位为 em 时，此时计算的标准以 p 的父元素的 font-size 为基础。如下代码：
html:
<p>以这个<span>例子</span>为例。</p>
css:
p{font-size:14px} span{font-size:0.8em;}结果 span 中的字体“例子”字体大小就为 11.2px（14 * 0.8 = 11.2px）。
查看全部 -
!important 最高层级
查看全部 -
优先级：内联>id>class>标签选择器(body p那类)>通配符选择器（*）
查看全部 -
这一章节我们来学习align-items属性，本属性定义了项目在交叉轴上的对齐方式。属性值分别为：
align-items: flex-start | flex-end | center | baseline | stretch;
结合右侧编辑器中的布局以及下面的样式设置进行理解：
flex-start：默认值，左对齐.box { height: 700px; background: blue; display: flex; align-items: flex-start; }实现效果：
flex-end：交叉轴的终点对齐.box { height: 700px; background: blue; display: flex; align-items: flex-end; }实现效果：
center： 交叉轴的中点对齐.box { height: 700px; background: blue; display: flex; align-items: center; }实现效果：
baseline：项目的第一行文字的基线对齐。.box { height: 700px; background: blue; display: flex; align-items: baseline; }三个盒子中设置不同的字体大小，可以参考右侧编辑器中的代码进行测试。
实现效果：
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。.box { height: 300px; background: blue; display: flex; align-items: stretch; } .box div { /*不设置高度，元素在垂直方向上铺满父容器*/ width: 200px; }实现效果：
查看全部 -
常用的块状元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
常用的内联元素有：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的内联块状元素有：
<img>、<input>
查看全部 -
使用text-align设置文本对齐方式
div{
text-align:center;
}
查看全部 -
使用letter/word-spacing增加或减少字符间的空白
h1{ letter-spacing:50px; }查看全部 -
p{line-height:1.5em;}line-height为文字设置行间间距查看全部 -
这一章我们来学习未知宽高实现盒子水平垂直居中，通常使用定位以及translate完成。参考下面例子：
<div class="box"> <div class="box1"> 慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网 </div> </div>
添加样式：
.box { border: 1px solid #00ee00; height: 300px; position: relative; } .box1 { border: 1px solid red; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }效果如下：
技术点的解释：
1、利用父元素设置相对定位,子元素设置绝对定位,那么子元素就是相对于父元素定位的特性。
2、子元素设置上和左偏移的值都为50%。
3、然后再用css3属性translate位移,给上和左都位移-50%距离，就能达到垂直水平居中的效果。
查看全部 -
水平居中设置-定宽块状元素
当被设置元素为 块状元素 时用 text-align：center 就不起作用了，这时也分两种情况：定宽块状元素和不定宽块状元素。
这一小节我们先来讲一讲定宽块状元素。(定宽块状元素：块状元素的宽度width为固定值。)
满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。我们来看个例子就是设置 div 这个块状元素水平居中：
html代码：
<body> <div>我是定宽块状元素，哈哈，我要水平居中显示。</div> </body>
css代码：
<style> div{ border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/ width:200px;/*定宽*/ margin:20px auto;/* margin-left 与 margin-right 设置为 auto */ } </style>也可以写成：
margin-left:auto; margin-right:auto;
注意：元素的“上下 margin” 是可以随意设置的。
查看全部 -
水平居中设置-行内元素
我们在实际工作中常会遇到需要设置水平居中的场景，比如为了美观，文章的标题一般都是水平居中显示的。
这里我们又得分两种情况：行内元素 还是 块状元素 ，块状元素里面又分为定宽块状元素，以及不定宽块状元素。今天我们先来了解一下行内元素怎么进行水平居中？
如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置
text-align:center来实现的。(父元素和子元素：如下面的html代码中，div是“我想要在父容器中水平居中显示”这个文本的父元素。反之这个文本是div的子元素 )如下代码：html代码：
<body> <div class="txtCenter">我想要在父容器中水平居中显示。</div> </body>
css代码：
<style> .txtCenter{ text-align:center; } </style>查看全部 -
absolute就是我人走了，坑不要了，后面的顶上；relative就是我人走了，坑还占着。换句话说，absolute是真走了，relative是假走了没准我还回来的。
查看全部 -
我想占大头 - 给子元素设置flex占比
这一章节我们来学习flex属性，设置子元素相对于父元素的占比。
可以参考右侧编辑器的代码，测试效果如下：
技术点的解释：
1、给子元素设置flex属性,可以设置子元素相对于父元素的占比。
2、flex属性的值只能是正整数,表示占比多少。
3、给子元素设置了flex之后,其宽度属性会失效。
查看全部 -
我们来学习align-items属性，本属性定义了项目在交叉轴上的对齐方式。属性值分别为：
align-items: flex-start | flex-end | center | baseline | stretch;
结合右侧编辑器中的布局以及下面的样式设置进行理解：
flex-start：默认值，左对齐.box { height: 700px; background: blue; display: flex; align-items: flex-start; }实现效果：
flex-end：交叉轴的终点对齐.box { height: 700px; background: blue; display: flex; align-items: flex-end; }实现效果：
center： 交叉轴的中点对齐.box { height: 700px; background: blue; display: flex; align-items: center; }实现效果：
baseline：项目的第一行文字的基线对齐。.box { height: 700px; background: blue; display: flex; align-items: baseline; }三个盒子中设置不同的字体大小，可以参考右侧编辑器中的代码进行测试。
实现效果：
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。如果未设置宽度，则div作为块级元素，直接由其中的内容撑开，div里面有多少东西就撑开多大，没有字则不显示。.box { height: 300px; background: blue; display: flex; align-items: stretch; } .box div { /*不设置高度，元素在垂直方向上铺满父容器*/ width: 200px; }实现效果：
查看全部
举报