![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS 基础笔记
文章平均质量分 80
起晚的蜗牛
Though getting up late, I will keep going and never give up.
展开
-
CSS实现最小宽度的正方形
题目,实现正方形容器,容器宽度随页面变化而变化,且最小宽度为500px;和“如何让子容器的高度等于父容器的宽度的一半” 一样,可分别利用 padding 的白分比特性和viewPort的vw 单位实现;题目两要求:正方形,最小宽度<!DOCTYPE html><html lang="en"><head> <meta charset...原创 2020-03-31 23:47:47 · 350 阅读 · 0 评论 -
如何让子容器的高度等于父容器的宽度的一半
如下:有A容器和B容器,A容器宽度和高度已知,使用CSS满足如下条件:B容器高度是A容器宽度的一半 B容器左右离A容器都是10px B容器在A中上下居中 B容器内部文字水平垂直居中这里面水平垂直居中不难实现,在上篇CSS 居中对齐中已经介绍,但是B容器高度为A容器width的一半如何实现呢?可以用到margin 和 padding的一个特性:百分比。 margin 和...原创 2019-11-02 20:27:59 · 5020 阅读 · 1 评论 -
页面可视宽高
最近项目中要做一个缩略图放大显示功能,放大的图片由用户上传,宽高没有限制。视觉要求是:按原尺寸显示图片,图片右上角放一个关闭图标;图片若是溢出可视区,按原宽高比缩小到可视区域。 实现时涉及到了可视区域大小的获取,查询接口,发现有很多个表示页面‘width’和‘height’ 的属性。下面以Height 为例,Width 与之对称。1) window对象有innerHeight和outerHe...原创 2018-07-27 18:12:55 · 1448 阅读 · 0 评论 -
CSS 盒模型
盒模型的定义:盒模型是页面设计和布局时用到一种思维模型。 盒模型由,Margin (外边距), Border (边框),Padding(内边距/填充) 和Content(内容)组成。其中外边距margin是透明的,不会遮挡周边的其他元素。标准盒模型里,用CSS对元素设置width 和 height 属性时, 设置的其实是content 部分的宽和高,元素实际占位空间,还需要加上Pad...原创 2018-07-07 19:27:51 · 127 阅读 · 0 评论 -
CSS 居中对齐
<div class="container"> <div class="content"></div><div>// flex,在容器元素上设置.container{ height: 300px;// display: flex; justify-content: center; align...原创 2019-10-20 16:09:49 · 292 阅读 · 1 评论