CSS
关注
分享
扫一扫
文章平均质量分 56
程序员通通
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
CSS面试：五种方式实现三栏布局（左右固定，中间自适应），以及优缺点的对比。
题目：如何实现高度200，左右宽度为300，中间自适应的三栏布局？请大家在看到这个问题时，先想一想自己能用几种方式实现这个题目？？？ 1. 浮动布局。代码如下： <style> .parent { width: 100%; height: 200px; } .right...原创 2018-04-13 09:42:38 · 685 阅读 · 0 评论 -
【CSS】总结一下CSS垂直居中的方案
1，使用flex布局（元素定宽，不定宽均适用）<section> <style> .parent { border: 1px solid red; padding: 20px; display: flex; justify-content: center; align-it...原创 2019-03-02 16:22:12 · 325 阅读 · 1 评论 -
【css】css实现布局： 左：200px，右：30%，中：自适应
第一种方法：浮动布局 &lt;style&gt; body { padding:50px; } * { box-sizing: border-box; } .clearfix::after { content: ''; display: block; clear: both } ....原创 2018-11-18 16:24:15 · 1003 阅读 · 1 评论 -
【CSS布局】深入理解CSS flex布局
先来看一张图：基本概念1， 主轴默认为x轴，侧轴默认为y轴。flex布局就是围绕这个轴来进行的2， flex container就是布局的父元素，flex item就是子元素flex container的属性一共有：1，主轴方向flex-direction: row/row-reverse/column/column-reverse来看一个例子： <style> ...原创 2018-11-17 21:01:58 · 710 阅读 · 1 评论 -
【CSS】深入理解CSS浮动布局
很多人对float属性理解的并不好，所以对float布局就有一点恐惧（比如我~），因为用float布局时会出现很多莫名其妙得问题，比如：1，父元素的高度怎么没啦？2， float元素怎么和其他元素重叠在一块了？说到float，就必须先说另外一个概念： 文档流文档流有两种：一，内联元素的文档流从左往右流动，比如： <style> div { border:...原创 2018-11-08 17:43:10 · 322 阅读 · 1 评论 -
HTML常用标签总结
p标签paragraph表示文本，段落h标签header，分为h1-h6，h1字体最大，h6字体最小br标签break表示换行，在html里面代码的回车换行是没用的，最终会被浏览器解析成一个空格hr标签horizontal定义定义水平线img标签image，定义图片iframe标签，定义一个新的页面，通常和a标签配合使用a标签anchor，定义锚点，用来发起get请求。a标签有几个比...原创 2018-11-05 16:22:19 · 358 阅读 · 0 评论 -
【CSS】手把手教你用CSS画三角形
用到的html代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&原创 2018-11-07 11:56:49 · 366 阅读 · 1 评论 -
CSS深入浅出float属性以及BFC的应用
float的特性以及float产生的影响？ 特性:当元素浮动之后，不会影响块级元素的布局，只会影响内联元素布局。 浮动元素碰到包含他的边框，或者浮动元素的边框会停止。浮动元素不在文档流中，会飘在文档流之上.影响一：当父元素没有设置高度时，父元素的高度塌陷<div class="parent"> <div class="children"> hello原创 2018-04-20 00:27:23 · 397 阅读 · 0 评论 -
【CSS】使用css实现一个loading效果
<style> body { padding: 200px; position: relative; } .load::before, .load::after { content: ''; position: absolute; top: 0; right: 0; left:...原创 2019-03-09 15:58:18 · 411 阅读 · 1 评论