全情海洋

2020年4月16日

摘要：一，高度塌陷 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 阅读全文

posted @ 2020-04-16 19:12 全情海洋阅读(723) 评论(0) 推荐(0) 编辑

HTML行内元素、块状元素、行内块状元素的区别

摘要： HTML可以将元素分类方式分为行内元素、块状元素和行内块状元素三种。首先需要说明的是，这三者是可以互相转换的，使用display属性能够将三者任意转换： (1)display:inline;转换为行内元素 (2)display:block;转换为块状元素 (3)display:inline-bloc 阅读全文

posted @ 2020-04-16 15:23 全情海洋阅读(357) 评论(0) 推荐(0) 编辑

less的基本使用

摘要：众所周知，less是一门css预处理语言，其他的类似还有scss、Stylus 等，和js相似度比较高的就是less了。话不多说，我们来看less的使用。 Node.js 环境中使用 Less ： npm install -g less > lessc styles.less styles.css 阅读全文

posted @ 2020-04-16 11:33 全情海洋阅读(523) 评论(0) 推荐(0) 编辑

css，图片和文字在父元素垂直居中，且图片和文字在中线对齐排列的几种方式

摘要：一，用flex的副轴来垂直居中对齐 1.副轴（由上到下）设置居中对齐（align-items: center;）即可 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</t 阅读全文

posted @ 2020-04-16 11:07 全情海洋阅读(8071) 评论(0) 推荐(0) 编辑

2020年4月15日

css flex弹性布局学习总结

摘要：一、简要介绍# flex（ flexible box：弹性布局盒模型）,是2009年w3c提出的一种可以简洁、快速弹性布局的属性。主要思想是给予容器控制内部元素高度和宽度的能力。目前已得到以下浏览器支持：其中在webkit内核的浏览器中使用时，必须加上-webkit-前缀采用Flex布局的元素阅读全文

posted @ 2020-04-15 21:39 全情海洋阅读(184) 评论(0) 推荐(0) 编辑

css 移动端像素，rem适配详解

摘要： 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>像素</title> 6 <style> 7 8 .box1{ 9 width: 200px; 10 height: 200px; 11 background- 阅读全文

posted @ 2020-04-15 21:34 全情海洋阅读(2610) 评论(0) 推荐(0) 编辑

五种水平垂直居中方式

摘要： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta name="viewport" content="width=device 阅读全文

posted @ 2020-04-15 20:16 全情海洋阅读(497) 评论(0) 推荐(0) 编辑

2020年4月14日

css弹性盒子-------桃园三兄弟之：flex-grow、flex-shrink、flex-basis详解

摘要： flex-grow、flex-shrink、flex-basis三个属性的作用：在flex布局中，父元素在不同宽度下，子元素是如何分配父元素空间的。 (注意：这三个属性都是在子元素上设置的，下面小编要讲的是父元素，指以flex布局的元素(display:flex)) 小编这里先教一下大家如何快速记阅读全文

posted @ 2020-04-14 14:00 全情海洋阅读(1112) 评论(0) 推荐(0) 编辑

css 利用flex居中对齐

摘要： 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 8 .box1{ 9 width: 800px; 10 height: 500px; 11 border: 4px r 阅读全文

posted @ 2020-04-14 12:38 全情海洋阅读(5417) 评论(0) 推荐(0) 编辑

css 弹性盒子（flex布局）的起边和终边详解

摘要： 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 list-style: none; 11 } 12 阅读全文

posted @ 2020-04-14 12:32 全情海洋阅读(902) 评论(0) 推荐(0) 编辑

公告