![](https://img-blog.csdnimg.cn/20190718093235414.jpeg?x-oss-process=image/resize,m_fixed,h_224,w_224)
HTML5/CSS3布局专栏
HTML5/CSS3布局专栏中包括常见的布局问题。比如:页面布局、元素定义等
IT淘金者
立志成为行业布道师的一名前端程序猿
展开
-
HTML5 新标签总汇
HTML5 新标签总汇2010-12-16 20:44聂微东 阅读(5060) 评论(8)编辑收藏HTML5新标签总汇: 有问题欢迎指出,有关于CSS3方面的知识点较多,下周一前整理出来.<article> 标签定义外部的内容(外部内容如blog,news)。 使用后感觉和P差不多,语义化的标签。<aside> 标签定义article以外的内容(可用做文章的侧栏). 语义化的标签。<audio>标签定义音...转载 2020-11-02 19:00:50 · 74 阅读 · 0 评论 -
CSS的4个简写
CSS的4个简写2010-12-13 18:50聂微东 阅读(1547) 评论(3)编辑收藏1.background 简写属性在一个声明中设置所有的背景属性:background-color background-image background-repeat background-attachment background-position例如: background: #444444 url(image.png) no-repeat fixed top;...转载 2020-10-31 15:50:20 · 114 阅读 · 0 评论 -
深入理解CSS盒模型 - 程序猿的程 - 博客园
深入理解CSS盒模型本文是学习中传思客在慕课网开的课程《前端跳槽面试必备技巧》的学习笔记。课程地址:https://coding.imooc.com/class/evaluation/129.html#Anchor。 如果你在面试的时候面试官让你谈谈对盒模型的理解,你是不是不知从何谈起。这种看似简单的题其实是最不好答的。 下面本文章将会从以下几个方面谈谈盒模型。基本概念:标准模型 和IE模型 CSS如何设置这两种模型 JS如何设置获取盒模型对应的宽和高 实例题(根据盒模型解释边距重..转载 2020-10-31 15:48:52 · 135 阅读 · 0 评论 -
CSS布局解决方案(终结版)
前端布局非常重要的一环就是页面框架的搭建,也是最基础的一环。在页面框架的搭建之中,又有居中布局、多列布局以及全局布局,今天我们就来总结总结前端干货中的CSS布局。居中布局水平居中1)使用inline-block+text-align(1)原理、用法原理:先将子框由块级元素改变为行内块元素,再通过设置行内块元素居中以达到水平居中。用法:对子框设置display:inline-block,对父框设置text-align:center。(2)代码实例<div class.转载 2020-10-31 15:47:14 · 93 阅读 · 0 评论 -
css框架:五大css流行框架的总结-css教程-PHP中文网
本篇文章给大家带来的内容是关于css框架:五大css流行框架的总结,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。如今,CSS框架越来越受欢迎,可以说已经应用到每一个网站上了。作为开发工具,CSS框架一直处于不断进化和改进的状态,因此我们强烈建议您关注眼下的趋势。这篇文章会带您了解2017年最流行的5种CSS框架。Bootstrap这个框架是GitHub的明星产品之一,被认为是拥有最好的响应性的CSS框架。专为前端开发而设计,有助于构建web设计理念、移动优先项目、网格系统、排版和转载 2020-10-31 15:42:25 · 175 阅读 · 0 评论 -
2018年最好用的20个Bootstrap网站模板
Bootstrap是目前最受欢迎也是最简洁的建站方式之一,尤其是伴随移动端的发展,响应式设计已经毫无疑问成为了网页设计的趋势,网站建设要求兼容手机端已经是一种刚需,也成为提升用户体验的一种必要方式。但这无疑会加大设计师和前端人员的工作量,基于这样的情况,为了最大程度的节约成本,选择使用响应式的前端框架网站模板越来越受欢迎。今天,Mockplus为大家精选了20个免费的高品质Bootstrap网站...转载 2020-03-20 22:40:11 · 2050 阅读 · 0 评论 -
Chrome浏览器12px问题-webkit-text-size-adjust: none 已失效的解决方案
对于早期的chrome, 如果要想显示12px以下的字体,一般通用的方案都是在对应的元素中添加div { -webkit-text-size-adjust: none;}但是我今天遇到的需求,添加了之后没有反应,而且浏览就根本不支持这种写法。在网上看到了博客《Chrome浏览器不支持字体小于12px的解决办法》看到了解决方案,使用transform + display, 于是便实践了...原创 2020-03-15 23:55:41 · 2400 阅读 · 0 评论 -
CSS实现div梯形分割
原理使用的border边框属性结合svg 转换详见代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>css实现div边框斜角</title> <style type="text/css">.lab...转载 2020-03-11 22:50:04 · 2544 阅读 · 2 评论 -
绝对定位的div图片居中自适应
需求点固定定位div中添加图片内容,保证图片垂直居中,并且自适应。一般在第三方UI组件中,这种布局需求较为常见解决方案一 (亲测有效)HTML代码:<div class="el-carousel__item is-active is-animating"> <img src="/static/img/login-bg3.51c5580.png" alt="">...原创 2019-08-09 23:33:31 · 1527 阅读 · 0 评论 -
图片做背景撑开div
需求点:设计师给了一张超大背景图,需要做一个不知道大小广告位,要求就是要把图片撑满整个页面,而且还得保证自适应。解决方案一 (亲测有效)HTML代码:<div class="wrap"></div>CSS代码:.wrap{ position: relative; padding-bottom: 35%; background-image: url(/s...原创 2019-08-09 23:03:20 · 3744 阅读 · 0 评论 -
CSS3笔记之定位篇(一)relative
知识点1:relative和absolute relative: 相对自身,并会限制内部absolute元素层叠 absolute: 相对容器,并受到父类容器relative的影响,比如:overflow:hidden/scroll fixed: 不受relative限制,只受z-index的限制知识点2:定位 相对自身 无侵入: relative的元素只会改变自己...原创 2018-11-02 14:39:35 · 375 阅读 · 0 评论 -
CSS3笔记之定位篇(二)z-index
知识点1:z-index基础 z-index:auto; 默认值 z-index: <integer> 整数 z-index: inherit 继承 不考虑css3 还有定位元素的z-index才有作用知识点2:z-index与定位元素 无嵌套:后来居上,哪个大哪个上//在没有添加z-index属性时,如果两个图片有重叠,默认为图片2覆盖图片1 ...原创 2018-11-06 23:27:46 · 260 阅读 · 0 评论 -
实现div里的img图片水平垂直居中
body结构<body> <div> <img src="1.jpg" alt="haha"> </div></body>方法一:将display设置成table-cell,然后水平居中设置text-align为center,垂直居中设置vertical-align为middle。<style type="text...转载 2019-08-02 09:22:41 · 161 阅读 · 0 评论