css
zhang070514
不喜欢运动的程序员不是好的工程师!
展开
-
面试官:说一下css盒子模型
所谓盒子模型(Box Model)就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个盛装内容的容器。每个矩形都是由元素的内容(content)、内边距(padding)、边框(border)和外边距(margin)组成。所有的文档元素(标签)都会生成一个矩形框,我们称为元素框,它描述了一个文档元素在网页布局汇总所占的位置大小。每个盒子除了有自己的大小和位置外,还影响着其他盒子的大小和位置,因此正确了解css盒子模型对我们前端页面布局十分重要。css的盒子模型包括IE盒子模型(怪异模型) 和 标准原创 2021-02-24 14:06:15 · 4409 阅读 · 0 评论 -
Table表格实现圆角
今天遇到一个table表格带圆角的一个弹框,避免自己以后忘记,记录一下。效果图:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>table表格实现圆角</title> <style> table{ width: 500px; border-sp原创 2021-02-05 15:57:11 · 2493 阅读 · 0 评论 -
css实现超出屏幕宽度横向滚动
最近在写页面时遇到这样一个效果,一个div里面有四个小的div横向排列,四个小div的宽度加起来超出了屏幕宽度,要求四个小div可以左右横向滑动。代码其实很简单,记录如下: <div class="scrollTest"> <div class="box" v-for="(item, index) in list"></div> </div> .scrollTest{ height: 300px; white-spa原创 2020-11-19 16:09:32 · 7015 阅读 · 5 评论 -
css实现三角形
首先我们新建一个100x100的正方形div,为了方便我们查看,设置一个背景颜色。 css代码如下:width: 100px;height: 100px;background-color: #333;接着给这个div添加两个border,width: 100px;height: 100px;background-color: #333;border-left:50p...原创 2018-09-12 08:34:33 · 304 阅读 · 0 评论 -
Flexbox——快速布局神器
一、Flex布局是什么?Flex是Flexible Box的缩写,意为“弹性布局”,用来为盒状模型提供最大的灵活性。任何一个容易都可以指定为Flex布局。Flexbox通常能让我们更好的操作它的子元素布局:如果元素容器没有足够的空间,我们无需计算每个元素的宽度,就可以设置他们在同一行。可以快速让他们布局在一列。可以方便让他们对齐容器的左、右、中间等。无需修改结构就可以改变他们的显示...原创 2018-10-30 09:27:42 · 1261 阅读 · 0 评论 -
一个高度自适应的div,里面有两个div,一个div高度为100px,另一个填满剩余的高度
html代码如下 <div class="main"> <div class="box1"></div> <div class="box2"></div> </div>第一种方式,利用定位 html,body{ height: 100%; margi原创 2018-11-08 22:00:19 · 3341 阅读 · 0 评论 -
第二个div高度随着父div高度改变而改变的几种实现方式
最近遇到这样一个需求,一个大的div高度不固定,里面有两个小的div,第一个div高度固定(比如为100px),第二个div高度填满大div的剩余高度。实现也很简单,想到了好几种实现方式,记录一下。 因为外面大的div高度不固定,我在这里就默认填满body。 1、定位:外面大的div相对定位,第二个div绝对定位,设置top:100px。代码如下:outer设置overflow:hidden去原创 2018-01-18 10:55:41 · 2610 阅读 · 0 评论