- 博客(11)
- 收藏
- 关注
RSS订阅原创 flex基本原理和属性
1、概念1、弹性盒模型语法基础概念——任何一个容器都可以指定为Flex布局：块（display）；行内（inline-flex：依然要加上浏览器前缀） 注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。弹性盒模型就 W3C 官方给到的解释是，这是设计来实现更复杂的版面布局。其本质上就是Box-model的延伸， Box-model定义了一个元素...
2020-03-17 15:45:36
803
原创 CSS样式：垂直居中 水平居中 的几种方法
1、flex使用flex布局，让居中元素的父元素为flex属性,让它在水平的主轴（main axis）和垂直的交叉轴（cross axis）居中就好html:<div class="father"> <div class="son"></div></div>css:*{ margin:0; padding:0;}.father...
2020-02-26 17:33:14
195
原创 浏览器默认样式
1、设置浏览器默认样式的原因由于同一个标签在不同浏览器中有不同的默认样式，为了让样式在所有浏览器中统一，并希望页面更加符合美观简洁和将一些常用样式加入到自定义样式中去使用我们应该做浏览器默默人样式的初始化2、浏览器默认样式的检查方法：可以用border+浏览器开发者工具来查看是否有默认样式3、常见浏览器默认样式1、文字斜体加粗字体样式：font-weight:normal;font-st...
2020-02-25 17:10:27
404
原创 block，inline和inline-block的概念以及区别
1、block块级元素block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。block元素可以设置margin和padding属性。2、inline内联元素inline元素不会独占一行，多个相邻的行内联元素会排列在同一行里，直到一行排列不下...
2020-02-25 16:51:07
413
原创 css表格的制作（table缺点）
1、表格标签：定义表格：<table>表格标题：<caption>表格表头：<thead>表格正文：<tbody>表格页脚：<tfoot>表头单元格：<th>表格行：<tr>表格单元格：<td>2、表格属性和样式：表格对其方式：align（左中右）表格边框宽度：border表格边...
2020-02-24 16:09:39
457
原创 SEO前端搜索引擎
1.SEO简介Search English Optimizatiion,搜索引擎优化。自从有了搜索引擎，SEO就诞生了1.它存在的意义是：为了提升网页在搜索引擎自然搜索结果中收录数量以及排序位置而作的优化行为。2.分类：白帽SEO和黑帽SEO。白帽SEO，起到了改良和规范网站设计的作用，使网站对搜索引擎和用户更加友好，并且网站也能从搜索引擎中获取合理的流量，这是搜索引擎的鼓励和支持的。黑...
2020-02-24 15:42:22
405
原创 三栏布局(双飞翼、圣杯、绝对定位、浮动、flex布局)
一、双飞翼布局与圣杯布局的区别圣杯布局和双飞翼布局达到的效果基本相同，都是侧边两栏宽度固定，中间栏宽度自适应。 主要的不同之处就是在解决中间部分被挡住的问题时，采取的解决办法不一样，圣杯布局是在父元素上设置了padding-left和padding-right，在给左右两边的内容设置position为relative，通过左移和右移来使得左右两边的内容得以很好的展现。双飞翼则是在center...
2019-10-15 00:26:02
359
原创 CSS中的BFC详解（两栏布局和三栏布局）
一、BFC介绍BFC（Block fomatting context）“块级格式化上下文”。是Web页面中盒模型布局的CSS渲染模式，是一个独立的渲染区域，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。二、形成BFC的条件1、根元素2、float属性不为none3、position为absolute或fixed4、display为inline-blo...
2019-10-09 23:46:05
1456
原创 CSS的定位
一、相对定位position: relative;1、不影响元素本身特性，没有定位偏移量时对元素无影响2、相对定位的元素仍然在文档流中，仍然占据着他本来占据 的位置空间（虽然他现在已经不在本来的位置了）。3、可以通过设置（“left”、“top”、“right”、“bottom”）垂直或水平位置，让这个元素“相对于”它的起点进行移动。4、提升层级，用z-index样式的值可以改变...
2019-10-08 22:31:30
73
原创 CSS框模型概述
CSS框模型框模型概述框模型概述元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。1、content：盒子内容，元素的后代元素等内容的区域，由width和height组成2、padding：内填充，元素内容和边框之间的区域，由上右下左4个方向的内填充组成padding-t...
2019-09-18 20:45:40
210
原创 CSS选择器的总结
CSS选择器元素选择器、id选择器、类选择器、属性选择器、派生选择器包括（后代选择器、子元素选择器、相邻兄弟选择器）补充伪类一、元素选择器最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。html {color:black;}h1 {color:blue;}二、id选择器id 选择器可以为标有特定 id 的HTML元素指定特定的样式，以 “#” 来定义...
2019-09-17 23:55:12
408
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人