![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
html+css
文章平均质量分 94
儒雅的曹曹曹
既然选择远方,便只顾风雨兼程
展开
-
css补充2:flex布局,居中方案等
一.flex 布局1.1 flex布局原理flex是flexible Box的缩写,意为"弹性布局”,用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为flex布局。当我们为父盒子设为flex布局以后,子元素的float、clear和vertical-align属性将失效。伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局flex 布局的子元素不会脱离文档流,很好地遵从了“流的特性”1.2 flex布局父元素常见属性1)flex-direction设置主轴方向(即项目的排列方向原创 2022-04-21 15:26:08 · 5198 阅读 · 0 评论 -
css实现响应式布局
一.什么是响应式布局响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式是PC端开发一套,手机端再开发一套,而使用响应式布局只要开发一套就够了。响应式设计与自适应设计的区别:响应式开发一套界面,通过检测视口分辨率,针对不同客户端在客户端做代码处理,来展现不同的布局和内容;自适应需要开发多套界面,通过检测视口分辨率,来判断当前访问的设备是pc端、平板、手机,从而请求服务层,返回不同的页面。cSS3媒体查询可以让我们针对不同的媒体类型定义不同的样式,当重置浏览器窗口大小的过程中,页面也会根据浏原创 2022-04-17 10:32:58 · 8326 阅读 · 0 评论 -
css补充(1):css实现小三角,精灵图,字体图标
一.css实现小三角1.1 三角形实现html:<div class="sanjiao"></div>css:.sanjiao { /* 高度和宽度必须指定为零 */ width: 0; height: 0; /* 给四边都设置边框和颜色 */ border-bottom: 30px solid #a1ffb8; border-top: 30px solid #d600d6; border-left: 30px s原创 2022-04-17 09:16:53 · 1381 阅读 · 0 评论 -
CSS盒子模型与浮动定位
文章目录一.CSS盒子模型1.1 盒子模型的组成1.2 边框(border)1.3 内边距(padding)1.4 外边距(margin)1.4.1 设置盒子水平居中1.4.2 外边距合并页面布局要学习三大核心是:盒子模型, 浮动 和 定位.一.CSS盒子模型1.1 盒子模型的组成盒子模型:就是把 HTML 页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器。CSS 盒子模型本质上是一个盒子,封装周围的 HTML 元素,它包括:元素内容(content),内边距(padding),边框原创 2022-03-24 16:06:41 · 1613 阅读 · 0 评论 -
CSS3新增属性与选择器
1.CSS3选择器1.1 属性选择器选择符简介E[att]选择具有att属性的E元素E[att=“val”]选择具有att属性且属性值等于val的E元素E[att^=“val”]匹配具有att属性,且值以val开头的E元素E[att$=“val”]匹配具有att属性,且值以val结束的E元素E[att*=“val”]匹配具有att属性,且值中含有val结束的E元素1.2 结构伪类选择器选择符简介E:first-child原创 2022-03-22 22:32:36 · 474 阅读 · 0 评论 -
HTML总结【详细】
什么是HTML?HTML 是 HyperText Markup Language(超文本标记语言)的缩写,它是用于创建网页 的标准标记语言。HTML 使用标记标签来描述网页,由浏览器来解析,即使用 HTML 来建 立 Web 站点,通过 Web 浏览器读取 HTML 文档,并以网页的形式显示出来。一.网页.html页面主要内容<!-- 文档类型声明,作用就是告诉浏览器使用那种HTML版本来显示网页,下面是HTML5 --><!DOCTYPE html> 用来定义当前文档.原创 2022-03-18 08:45:19 · 2650 阅读 · 3 评论