css与布局
文章平均质量分 94
程序员Better
一个热爱分享交流,专注前端的程序员(全网同名) 关注程序员Better学习更多前端学习内容
展开
-
一文搞懂Grid 布局
Grid 布局是什么?Grid 布局即网格布局,是一种新的 CSS 布局模型,比较擅长将一个页面划分为几个主要区域,以及定义这些区域的大小、位置、层次等关系。号称是最强大的的 CSS 布局方案,是目前唯一一种 CSS 二维布局。利用 Grid 布局,我们可以轻松实现类似下图布局,演示地址Grid 布局和 flex 布局讲到布局,我们就会想到 flex 布局,甚至有人认为竟然有 flex 布局了,似乎没有必要去了解 Grid 布局。但 flex 布局和 Grid 布局有实质的区别,那就是 flex 布原创 2020-09-29 10:25:14 · 46314 阅读 · 22 评论 -
css清除浮动的总结 与 BFC
清除浮动css使用了浮动 导致了父元素的塌陷问题 要是用清除浮动父盒子塌陷了<!DOCTYPE html><html lang="en"> <head> <style> .container { background: red; } .box1 { f...原创 2020-04-08 23:08:05 · 212 阅读 · 0 评论 -
css画一个三角形,梯形,平行四边形
一 使用css简单的画一个三角形1. 先来看看border的划分.demo{ width:100px; height:100px; border:3px red solid; }2. 当盒子的宽度为0会是什么样子呢 .demo{ width:0; height:0;...原创 2020-04-08 21:25:56 · 1036 阅读 · 0 评论 -
2020前端面试-HTML5+CSS3 重要知识点详解
HTML5 这个都会问原创 2020-04-05 23:43:17 · 510 阅读 · 0 评论 -
Flex弹性盒子优雅布局
Flex简介在flex布局之前,我们想要为页面做一个有优雅的两栏或者三栏布局需要大费周折的使用浮动或者定位来实现,如今我们可以快速方便是使用flex弹性盒子来实现Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。块级元素使用display: flex; 行内元素使用inline-flex,容器使用Flex布局后,子元素的float、clea...原创 2020-03-26 23:54:33 · 253 阅读 · 0 评论 -
必备知识点:css居中,你还没有记住吗?
居中问题(重点)居中问题真的是老生常谈的话题,基本上每次面试都会被问到,毕竟在样式的时候居中真的无处不在,关于居中的文章网上比比皆是,好好记住4-5种,以后面试跟工作没有任何问题啦常见的居中分很多中,比如水平居中,垂直居中,水平垂直居中,定宽高和不定宽高,我们分定宽高和不定宽高来讨论水平垂直居中的几种方式1.定宽高定位+margin:auto+left+right+ top+bottom...原创 2020-03-14 00:12:46 · 293 阅读 · 1 评论